table要素に行（tr要素）を追加
table要素に行（tr要素）を追加するには、element.insertRowメソッドを使用します。
生成と追加が同時に行われます。
- ※ table要素だけでなく、thead要素やtbody要素、tfoot要素へ追加することもできます。
- ※ table要素でinsertRowメソッドを実行した場合でthead要素、tbody要素、tfoot要素がない場合は暗黙的にtbody要素が生成された状態で、そのtbody要素に追加されます。
- ※ table要素でinsertRowメソッドを実行した場合でthead要素が存在する場合、thaed要素に追加されます。
- ※ table要素でinsertRowメソッドを実行した場合、tfoot要素がtbody要素の前にあったとしてもtbody要素へ追加されます。
構文
var rowElement = element.insertRow(index);| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
index | number | 追加する位置のインデックス番号 -1を指定すると最後に追加 |
- ※ 第一引数は省略できず省略するとエラーになるとされていますが、実際のブラウザでは省略でき、省略すると-1と同じ動作で最後に追加されます。
戻り値
追加されたtr要素を返します。
サンプルコード
JavaScript
// table要素を取得
var tableElem = document.getElementById('sample-table');
// tbody要素にtr要素（行）を最後に追加
var trElem = tableElem.tBodies[0].insertRow(-1);
// td要素を追加
var cellElem = trElem.insertCell(0);
// td要素にテキストを追加
cellElem.appendChild(document.createTextNode('セル'));