TableRow insertCell() メソッド

HTML DOM TableRow オブジェクト

定義と使用方法

insertCell() メソッドはセルを現在の行に挿入します。

ヒント：使用してください deleteCell() メソッド 現在のテーブル行のセルを削除します。

も参照してください：

HTML 参考マニュアル：HTML <tr> タグ

例

例 1

id="myRow"のテーブル行の先頭に内容を含む新しいセルを挿入します：

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

実際に試してみる

ページの下部にさらに多くの例が提供されています。

文法

tablerowObject.insertCell()index)
パラメータ 説明
index

FirefoxおよびOperaでは必須ですが、IE、ChromeおよびSafariではオプションです。

数値（0から始まる）、新しいセルが現在の行内の位置を指定します。

値 0 は新しいセルを最初の位置に挿入することを意味します。また、-1 の値を使用することもできます。これは新しいセルを最後の位置に挿入します。

このパラメータを省略すると、IEでは最後の位置に、ChromeおよびSafariでは最初の位置に insertCell() が新しいセルを挿入します。

技術的詳細

返り値：

挿入されたセル要素。

ブラウザサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

さらに多くの例

例 2

id="myRow" のテーブル行の末尾に内容を含む新しいセルを挿入します：

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

実際に試してみる

例 3

id="myRow" のテーブル行のインデックス位置 2 に内容を含む新しいセルを挿入します：

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

実際に試してみる

例 4

最初のテーブル行の先頭に新しいセルを挿入します。rows 集合 (.rows[0]) は、id が "myTable" のテーブルに含まれるすべての <tr> 要素の集合を返します。

数字 [0] は検索する要素を指定します。この例では、最初のテーブル行です。そして、insertCell() を使用してインデックス位置 -1 に新しいセルを挿入します：

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

実際に試してみる

例 5

id="myRow" のテーブル行から最初のセルを削除します：

var row = document.getElementById("myRow");
row.deleteCell(0);

実際に試してみる

例 6

テーブルの先頭に新しい行を挿入します。

insertRow() メソッドは、指定されたインデックス位置に新しい行を挿入します。この例では、id="myTable" のテーブルの最初の位置（先頭）です。

それから、insertCell() メソッドを使用して新しいセルを新しい行に追加します。

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

実際に試してみる

HTML DOM TableRow オブジェクト