table要素にある行(tr要素)にセル(td要素)を追加

table要素にある行(tr要素)にセル(td要素)を追加するには、rowElement.insertCellメソッドを使用します。
生成と追加が同時に行われます。

構文

var cellElement = rowElement.insertCell(index);
引数名 説明
第一引数
必須
index number 追加する位置のインデックス番号
-1を指定すると最後に追加
  • ※ 第一引数は省略できず省略するとエラーになるとされていますが、実際のブラウザでは省略でき、省略すると-1と同じ動作で最後に追加されます。

戻り値

追加されたtd要素を返します。

サンプルコード

JavaScript

// table要素を取得
var tableElem = document.getElementById('sample-table');

// tbody要素にtr要素(行)を最後に追加
var trElem = tableElem.tBodies[0].insertRow(-1);

// td要素を最後に追加
var cellElem = trElem.insertCell(-1);

// td要素にテキストを追加
cellElem.appendChild(document.createTextNode('セル'));

JavaScript逆引きリファレンス一覧へ戻る