JavaScriptでテーブルを作成する方法（JavaScriptでテーブルを描画する2つの方法）

JavaScriptでテーブルを作成する方法（JavaScriptでテーブルを描画する2つの方法）_基礎知識

WBOY

リリース： 2016-05-16 17:09:55

オリジナル

2144 人が閲覧しました

1. insertRow() 関数と insertCell() 関数

insertRow() 関数は、次の形式でパラメータを受け取ることができます:

insertRow(index): インデックスは 0 から始まります

この関数は、最初の行の前に新しい行を追加する insertRow(0) など、インデックスの行の前に新しい行を追加します。デフォルトの insertRow() 関数は、テーブルの末尾に新しい行を追加する insertRow(-1) と同等です。通常、これを使用する場合: objTable.insertRow(objTable.rows.length) テーブル objTable の最後に新しい行を追加します。

insertCell() と insertRow の使用法は同じであるため、ここでは説明しません。

2. deleteRow() メソッドと deleteCell() メソッド

deleteRow() 関数はパラメータを取ることができ、形式は次のとおりです: deleteRow(index): インデックスは 0 から始まります

上記2つの方法と同じ意味は、指定した位置の行やセルを削除することです。渡されるパラメータ: インデックスはテーブル内の行の位置であり、次のメソッドで取得して削除できます:

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

var row=document.getElementById("Id of row" ); 
varindex=row.rowIndex;//この属性がありますね、
objTable.deleteRow(index);

使用中に遭遇した問題についてお話します。テーブル内の行を削除する際、特定の行を削除するとテーブル内の行数がすぐに変更されるため、テーブルをすべて削除したい場合は行を削除します。、次のコードは間違っています:

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

function clearRow(){ 
 objTable = document.getElementById("myTable"); 

 for( var i=1; i { 
 tblObj.deleteRow(i); } 
}

このコードは元のテーブルの本体を削除しようとしています。問題は 2 つあります。まず第一に、deleteRow(i) にすることはできません。deleteRow(1) にする必要があります。テーブルの行を削除すると、テーブル内の行数が常に減少し、削除される行の数が常に予想される値の半分未満になるためです。テーブルを正しく削除すると、コード行は次のようになります:

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

function clearRow(){ 
 objTable = document.getElementById("myTable"); 
 var length= objTable.rows.length; 
 for( var i=1; i { 
 objTable.deleteRow(i) );
 } 
}

3. セルと行のプロパティを動的に設定します

A. 次の形式で setAttribute() メソッドを使用します: setAttribute(属性, 属性値)

注: このメソッドは、ほとんどすべての DOM オブジェクトに使用できます。最初のパラメーターは属性の名前 (例: border) で、2 番目のパラメーターはボーダーに設定する値 (例: 1

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

var objMyTable = document.getElementById("myTable ");

objMyTable.setAttribute("border",1);//テーブルの境界線を 1 に設定します

その他、たとえば TD の高さを設定したい場合は、最初に TD オブジェクトを取得してから setAttribute() メソッドを使用する必要もあります

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

var objCell = document.getElementById("myCell) ");

objCell.setAttribute("height",24);//セルの高さを 24 に設定します

使用中にスタイルの設定で問題が発生しました。代わりに setAttribute("class","inputbox2") を使用する必要があります。ははは、同じだと思います。問題は、一部の属性が DW の属性と一致しないことです。笑、自分で調べてみましょう。

B. 直接割り当て

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

var objMyTable = document.getElementById("myTable ");

objMyTable.border=1;//テーブルの境界線を 1 に設定します

この方法は誰にでも当てはまります（笑）。

4. テーブルを作成します

行

とセルの追加と削除を理解したら、テーブルを作成できます。

ステップ 1: 動的に変更できるテーブルが必要です。ここで話しているのは、ページ上にすでに存在するテーブルです。ID: myTable

を設定する必要があります。

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

var objMyTable = document.getElementById("myTable ");

ステップ 2: 行オブジェクトと列オブジェクトを作成する

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

varindex = objMyTable.rows.length- 1;
var nextRow = objMyTable.insertRow(index);//追加する行は 2 行目から最後まで追加されます

//セルボックス番号
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " ";
newCellCartonNo.setAttribute("className","tablerdd");

これで、行と列を作成するだけです。以下に具体的なコードを投稿しました。非常に簡単な例ですが、方法はおそらく上記のとおりです（笑）、ゆっくり調べてみましょう〜

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

.org/1999/xhtml"> ;head>

1 行目< ;

5. appendChild() メソッド

コードをコピー

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

私のテストページ