ネイティブ JavaScript を使用して動的テーブルを作成します (コメントは明確に記述されています)

著者：Eve Cole 更新時間：2025-02-07 16:24:02

私は最近、オライリーの本を 3 冊読みました。これらは一般的に野獣の本と呼ばれています (クラスメートの 1 人の名前が私とよく似ています、笑)。そして、多くの企業が動的フォームということで、js を使用して動的フォームを作成しようとしましたが、firibug プラグインを使用したほうが良いため、それをデバッグするために filfox ブラウザーを使用しました。やりたいことはたくさんあるので、ボタンをクリックして行を追加すると、どんどん追加されて、どんどん美しくなっていきます。誰もが一緒に学べるようにソースコードを投稿します。js の初心者の方は、ご容赦ください。

ps: 長い間使用していないので、なぜ上に行番号が表示されないのかわかりません。ノートはわかりやすく書かれており、みんなで一緒に学ぶことができます。

次のようにコードをコピーします。

<頭>

<title>動的テーブル</title>

ボディ{背景色:#9CC;テキスト整列:センター}

テーブル{ margin:10px auto;}

tr th { ボーダー: 1px ソリッド #096;}

td{ボーダー: 1px ソリッド #096;}

</スタイル>

/*関数外で宣言できるのは一部の変数のみであり、呼び出して実行する関数がないため演算メソッドは使用できません。 */

// ページをロードするとき、選択ボックスは 1 回限りの使用であるため、テーブルのヘッダーに配置します。

window.onload = function(){

var tab = document.getElementById('tab');

var firsttr = document.getElementsByTagName('tr')[0];

var childtd = firsttr.childNodes;

//最初の行と列に選択ボックスを追加します

var inp = document.createElement('input');

inp.type = 'チェックボックス';

//DOMレベル2イベント登録

catchEvent(inp,'click',function(){ //状態を判断する関数を登録

if(inp.checked ==true){

すべて選択();

}それ以外{

cancelSelect();

}

});

//catchEvent(inp,'click',allSelect);

//catchEvent(inp,'change',cancelSelect);

childtd[0].appendChild(inp);

}

//行を追加

//var count =0;//カウント用の列を追加します

関数 addRow(){

//カウント++;

var tab = document.getElementById('tab');

var firsttr = document.getElementsByTagName('tr')[0];

var childtd = firsttr.childNodes;

var tr = document.createElement('tr');

var artd = 新しい配列();

var arrinp = 新しい Array();

for(var i =0;i<childtd.length;i++){

artd[i] = document.createElement('td');

arinp[i] = document.createElement('input');

if(i==0){

arinp[i].type = 'チェックボックス';

arinp[i].name = 'セレクトボックス';

}else if(i==1){

//arrinp[i] = document.createTextNode(count);

arinp[i] = document.createTextNode('');

}

arrtd[i].appendChild(arrinp[i]);//入力に配列を追加する必要がある理由を考えてください。

tr.appendChild(arrtd[i]);

}

tab.appendChild(tr);

newSort();

}

//削除操作

関数 deleteRow(){

varparentTr = new Array();//まず選択した行を配列に入れます

var box = document.getElementsByName('selectbox');

var tab = document.getElementById('tab');

for(var i = 0;i<box.length;i++){

if(box[i].checked==true){

var 親 = box[i].parentNode;

parentTr[i] =parent.parentNode;//これが直接内部に配置されている場合、なぜ完全に削除できないのでしょうか? ?反応が足りないからでしょうか？

//tab.removeChild(parentTr);

}

for(var i = 0;i<parentTr.length;i++){ //これにより、選択されたすべての項目が削除されます

if(parentTr[i]){ //ここでは、まず null 値かどうかを判断する必要があります。null でない場合は、エラーが報告されます。

tab.removeChild(parentTr[i]);

}

newSort();

}

//削除した場合は再ソート

関数 newSort(){

var text = 新しい配列();

var child_td = 新しい配列();

var arr_tr = document.getElementsByTagName('tr');

for(var i = 1;i<arr_tr.length;i++){

child_td[i] = arr_tr[i].childNodes[1];// 2 行目から始まる 2 列目のすべてのノードを取得します

if(child_td[i].childNodes[0]){

child_td[i].removeChild(child_td[i].childNodes[0]);

}

text[i] = document.createTextNode(i);

child_td[i].appendChild(text[i]);

}

//すべての操作を選択

関数 allSelect(){

var box = document.getElementsByName('selectbox');

for(var i= 0;i<box.length;i++){

box[i].checked = true;

}

//すべての選択をキャンセルします

関数 cancelSelect(){

var box = document.getElementsByName('selectbox');

for(var i = 0;i<box.length;i++){

if(box[i].checked == true){

box[i].checked =false;

}

//イベント登録関数

function catchEvent(eventobj,event,eventHandler){

if(eventobj.addEventListener){

eventobj.addEventListener(event,eventHandler,false);

}else if(eventobj.attachEvent){

イベント = 'オン'+イベント;

イベントobj.attachEvent(イベント,イベントハンドラー);

}

//catchEvent(add,'click',addRow);

</script>

</head>

<本文>

<h3>動的テーブル</h3>

<tr><td></td><td>シリアル番号</td><td>質問 1</td><td>質問 2</td><td>質問 3</td></tr>

</テーブル>

</body>

</html></span>