Table cells 集合

HTML DOM Table オブジェクト

定義と用法

cells 集合はテーブル内のすべての <td> または <th> 要素の集合を返します。

注記：集合内の要素はソースコード内での出現順序に従って並べ替えられます。

ヒント：使用 rows 集合 テーブル内のすべての <tr> 要素の集合を返します。

ヒント：使用してください： insertRow() メソッド 新しい行 (<tr>) を作成します。

ヒント：使用してください： deleteRow() メソッド 行を削除します。

ヒント：使用してください： insertCell() メソッド 新しいセル（<td>）を作成します。

ヒント：使用してください： deleteCell() メソッド セルを削除します。

も参照してください：

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

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

JavaScript 参考マニュアル：HTML DOM TableData オブジェクト

JavaScript 参考マニュアル：HTML DOM TableHeader オブジェクト

例

例 1

最初の行のセル数を表示します：

var x = document.getElementById("myTable").rows[0].cells.length;

自分で試してみる

x の結果は：

2

例 2：[index]

テーブルの最初の行の最初のセルの innerHTML を出力します：

alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);

自分で試してみる

例 3：item(index)

テーブルの最初の行の最初のセルの innerHTML を出力します：

alert(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);

自分で試してみる

例 4：namedItem(id)

id="myTd" のセルの innerHTML をテーブルの最初の行から出力します：

alert(document.getElementById("myTable").rows[0].cells.namedItem("myTd").innerHTML);

自分で試してみる

例 5

最初のテーブルセルの内容を変更します：

var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";

自分で試してみる

構文

tableObject.cells

属性

属性 説明
length

集合内の <td> と/または <th> 元素の数を返します。

注記：この属性は読み取り専用です。

メソッド

メソッド 説明
[index]

指定された索引を持つ <td> と/または <th> 元素を返します（0から始まる）。

注記：索引番号が範囲外の場合、null を返します。
item(index)

指定された索引を持つ <td> と/または <th> 元素を返します（0から始まる）。

注記：索引番号が範囲外の場合、null を返します。
namedItem(id)

指定された id を持つ集合から <td> と/または <th> 元素を返します。

注記：id が存在しない場合、null を返します。

技術的詳細

DOM バージョン： Core Level 2 Document Object
返り値：

HTMLCollection オブジェクトは、<tr> 元素内のすべての <td> と/または <th> 元素を表します。

集合内の要素はソースコード内での出現順序に従って並べ替えられます。

ブラウザのサポート

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

HTML DOM Table オブジェクト