DOM の基礎チュートリアル: DOM を使用してフォームを制御する_基礎知識

今はテーブルの CSS コントロールについては説明しません。まず、テーブルの一般的に使用される DOM を共有しましょう。

テーブルの追加操作によく使用されるメソッドは、insertRow() メソッドと insertCell() メソッドです。

行はゼロから計算されます。例:

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

var oTr = document.getElementById("member")。 insertRow(2 )

は 2 行目に新しい行を追加することを意味します。

コードをコピーします コードは次のとおりです:

var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("11 月 5 日");
aText[3] = document.createTextNode("Scorpio");
aText[4] = document.createTextNode("1038818");
for(var i=0;i var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}

変数 oTr はテーブルに新しい行を挿入し、insertCell を使用してこの行に新しいデータを挿入し、createTextNode を使用して新しいテキスト ノードを作成し、それを appendChild の oTd に渡します。oTd は新しいセルです。

1. 行を挿入します (テーブルを動的に追加します)

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

window.onload=function(){
    var oTr = document.getElementById("メンバー").insertRow(2);    //插入一行
    var aText = new Array();
    aText[0] = document.createTextNode("fresheggs");
    aText[1] = document.createTextNode("W610");
    aText[2] = document.createTextNode("11 月 5 日");
    aText[3] = document.createTextNode("Scorpio");
    aText[4] = document.createTextNode("1038818");
    for(var i=0;i         var oTd = oTr.insertCell(i);
        oTd.appendChild(aText[i]);
    }
}


   
   
       
       
        誕生日
        星座
        モバイル
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
テーブル>

2.表格を変更する内容

テーブルの作成後は、HtmlDom を直接使用してテーブルの操作を実行でき、document.getElementById()、document.getElementsByTagName() の操作よりも便利です。
oTable.rows[i].cell[j]
上記では、行、セルの 2 つのプロパティを介して、テーブル特定のコンテンツの i 行と j 列 (すべてが 0 から始まる) にアクセスし、単一の要素オブジェクトを取得した後、innerHTML プロパティを変更して宇のコンテンツを使用できます。 > 例: 修正4行5列の内容は良好です
以下の代コードを使用できます

复制代 代码如下:

var oTable = document.getElementById("table1");
oTable.rows[4].cells[5].innerHTML = "良い";

3.删除表格内容

テーブルには追加、変更、削除機能があります。

テーブル内の削除行には、deleteRow(i) メソッドが使用されます。i は行番号です。
テーブル内の削除列は tr の deleteCell(j) メソッドを使用します。

次のように、表格の第 2 行および原来表の第 3 行の第 2 列を示します

复制代 代码如下:

var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];

次のコードは、動的削除が HTML フレームワーク全体に影響を与えないこと、またはテーブルに多くのコンテンツがある場合を考慮して、テーブルの 2 行目と元のテーブルの 3 行目の 2 列の削除を表します。 、動的な削除と追加が使用できます

コードをコピーします コードは次のとおりです:

window.onload=function(){
var oTr = document.getElementById("member").insertRow(2) //行を挿入
; var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("11 月 5 日");
aText[3] = document.createTextNode("Scorpio");
aText[4] = document.createTextNode("1038818");
for(var i=0;i var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}

メンバーリスト

名前	クラス
アイザック	W13	6 月 24 日	がん	1118159
ガールウィング	W210	9 月 16 日	乙女座	1307994
テイストストーリー	W15	11 月 29 日	射手座	1095245

                                                                                                                                              ＆lt; th scope = "col"＆gt; class＆lt;/th＆gt;
                                                                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
テーブル>



列を削除





コードをコピー


コードは次のとおりです:

function deleteColumn(oTable, iNum) {
// 列削除関数をカスタマイズします。つまり、各行の対応するセルを削除します
for (var i = 0; i oTable.rows[i].deleteCell(iNum);
}
window.onload = function() {
var oTable = document.getElementById("table1");
deleteColumn(oTable, 2);
}

テーブルの列を削除する場合、DOM には直接呼び出すことができるメソッドはありません。このメソッドは 2 つのパラメーターを受け取ります。1 つのパラメーターはテーブル オブジェクトで、もう 1 つのパラメーターはユーザーが指定する列です。番号を削除したい。記述方法は非常に簡単で、deleteCell()メソッドを使用して、各行に対応するセルの削除メソッドを実行します。

メンバーリスト