方法1: createElementとappendChildを使用する方法
// テーブル要素を取得
var table = document.getElementById("myTable");
// 新しい行を作成
var row = document.createElement("tr");
// 行にセルを追加
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.innerHTML = "セル1の内容";
cell2.innerHTML = "セル2の内容";
// セルを行に追加
row.appendChild(cell1);
row.appendChild(cell2);
// 行をテーブルに追加
table.appendChild(row);
この例では、createElement
メソッドを使用して新しいtr
要素(行)を作成し、createElement
メソッドを使用して新しいtd
要素(セル)を作成します。innerHTML
プロパティを使用してセルの内容を設定し、appendChild
メソッドを使用してセルを行に追加します。最後に、appendChild
メソッドを使用して行をテーブルに追加します。
方法2: innerHTMLを使用する方法
// テーブル要素を取得
var table = document.getElementById("myTable");
// 新しい行を作成
var newRow = "<tr><td>セル1の内容</td><td>セル2の内容</td></tr>";
// テーブルの末尾に行を追加
table.innerHTML += newRow;
この例では、innerHTML
プロパティを使用して新しい行のHTML文字列を作成し、テーブルの末尾に行を追加します。注意点として、innerHTML
プロパティはテーブルの内容を完全に置き換えるため、既存のテーブルの内容が失われることに注意してください。
以上の方法を使用してJavaScriptでテーブルの行を作成することができます。これらのコード例を参考にしながら、自分のプロジェクトに適した方法を選択してください。