JavaScript学習メモ(13) Dom作成テーブル_基礎知識

Dom の基本 - テーブルの作成
js を使用してテーブルを動的に作成するには、appendChild()、insertRow、insertCell() という 2 つの形式があります。ただし、最初の方法では IE で問題が発生する可能性があるため、2 番目の方法を使用することをお勧めします。
1. insertRow(index): インデックスは 0 から始まります
この関数は、最初の行の前に新しい行を追加する insertRow(0) など、インデックスの行の前に新しい行を追加します。デフォルトの insertRow() 関数は、テーブルの末尾に新しい行を追加する insertRow(-1) と同等です。一般的に使用する場合:
objTable.insertRow (objTable.rows.length) は、テーブル objTable の最後に新しい行を追加します。
insertCell()とinsertRowの使い方は同じです。
2. deleteRow(index): インデックスは 0 から始まります
指定された位置の行を削除します。 渡されるパラメータ: Index はテーブル内の行の位置です。
var row = document.getElementById("row's Id");
varindex = row.rowIndex; //この属性があります
objTable.deleteRow(index);使用中にテーブルの削除を行います。 rowing の際、特定の行を削除すると、テーブル内の行数がすぐに変更され、rows.length が常に小さくなるため、テーブル内のすべての行を削除したい場合は、次のようにします。 >

コードをコピー コードは次のとおりです。

function RemoveAllRow() {

var objTable = document.getElementById("myTable");
var length = objTable.rows.length;
for (var i = 1; i objTable.deleteRow(i); 🎜>}
}


3. setAttribute() メソッドはセルと行の属性を動的に設定します
形式は次のとおりです: setAttribute (属性, 属性値)

var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border", 1); // テーブルの境界線を 1 に設定します
使用時にスタイルの設定で問題が発生しました
setAttribute("class", "inputbox1"); は使用できません。代わりに、
setAttribute("className", "inputbox1")、
を使用してください。行 とセル の追加と削除を理解すれば、テーブルを作成できます。
ステップ 1: 動的に変更するテーブルが必要です。ここでは、ID を設定します。myTable
var objMyTable = document.getElementById("myTable) ");
ステップ 2: 行オブジェクトと列オブジェクトを作成する




コードをコピーします

コードは次のとおりです: varindex = objMyTable.rows.length; var nextRow = objMyTable.insertRow(index); //最後の行

//var nextRow = objMyTable.insertRow(0); /最初の行

以下はサンプルコードです

コードをコピーします

コードは次のとおりです