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

著者：Eve Cole 更新時間：2025-01-28 04:00:02

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");

varindex=row.rowIndex;//こんな属性あるんですね、へへ

objTable.deleteRow(インデックス);

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

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

関数clearRow(){

objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )

{

tblObj.deleteRow(i);

}

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

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

関数clearRow(){

objTable= document.getElementById("myTable");

var length = objTable.rows.length;

for(var i=1; i<length; 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. テーブルを作成する

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

ステップ 1: 動的に変更するテーブルが必要です。ここで説明しているのは、ページ上に既に存在するテーブルです。id: myTable を設定する必要があります。

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

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

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

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

var インデックス = objMyTable.rows.length-1;

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

//セルボックス番号

var newCellCartonNo = nextRow.insertCell();

var cartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("className","tablerdd");

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<頭>

<title>ブルーレイ-BlueShine</title>

<スクリプト言語="JavaScript">

var カウント = false、NO = 1;

関数 addRow(){

カウント=!カウント;

//行を追加

var newTr = testTbl.insertRow(testTbl.rows.length);

// 2 つの列を追加します

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

//列の内容と属性を設定します

if(カウント){newTr.style.background="#FFE1FF";}

else {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<input type=checkbox id="box4">';

NO++

newTd1.innerText="行 "+ NO+";

}

</script>

</head>

<本文>

</tr>

</テーブル>

<ラベル>

</label>

</body>

</html>

5.appendChild()メソッド

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

<html>

<頭>

<title>私のテストページ</title>

<!--

var textNumber = 1;

関数 addTextBox(form, afterElement) {

// テキストボックスの番号をインクリメントします

テキスト番号++;

//ラベルを作成する

var label = document.createElement("label");

//テキストボックスを作成する

var textField = document.createElement("input");

textField.setAttribute("タイプ","テキスト");

textField.setAttribute("名前","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// ラベルのテキストを追加します

label.appendChild(document.createTextNode("テキストボックス #"+textNumber+": "));

// テキストボックスを中に入れます

label.appendChild(textField);

// すべてをフォームに追加します

form.insertBefore(label,afterElement);

false を返します。

}

関数 RemoveTextBox(form) {

if (textNumber > 1) { // テキストボックスが複数ある場合

// 最後に追加したものを削除します

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

テキスト番号--;

}

//-->

</script>

<!--

ラベル {

表示:ブロック;

マージン:.25em 0em;

}

-->

</スタイル>

</head>

<本文>

<label>テキストボックス #1: <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</form>

</body>

</html>

<html>

<頭>

<title>私のテストページ</title>

<!--

var textNumber = 1;

関数 addTextBox(form, afterElement) {

// テキストボックスの番号をインクリメントします

テキスト番号++;

//ラベルを作成する

var label = document.createElement("label");

//テキストボックスを作成する

var textField = document.createElement("input");

textField.setAttribute("タイプ","テキスト");

textField.setAttribute("名前","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// ラベルのテキストを追加します

label.appendChild(document.createTextNode("テキストボックス #"+textNumber+": "));

// テキストボックスを中に入れます

label.appendChild(textField);

// すべてをフォームに追加します

form.insertBefore(label,afterElement);

false を返します。

}

関数 RemoveTextBox(form) {

if (textNumber > 1) { // テキストボックスが複数ある場合

// 最後に追加したものを削除します

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

テキスト番号--;

}

//-->

</script>

<!--

ラベル {

表示:ブロック;

マージン:.25em 0em;

}

-->

</スタイル>

</head>

<本文>

<label>テキストボックス #1: <input type="text" name="txt1" id="txt1" /></label>

<p>

</p>

</form>

</body>

</html>