HTMLTableRowElement: insertCell() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLTableRowElement.insertCell() メソッドは、新しいセル (<td>) を表の行 (<tr>) に挿入し、そのセルの参照を返します。

メモ: insertCell() はセルを直接行に挿入します。 Document.createElement() を使用して新しい <td> 要素を作成した場合のように、 Node.appendChild() を使用して個別にセルを追加する必要はありません。

ただし、 insertCell() を使用して新しい <th> 要素を作成することはできません。

構文

js
insertCell()
insertCell(index)

HTMLTableRowElement は HTML の <tr> 要素への参照です。

引数

index 省略可

新しいセルの位置を指定します。 index が -1 またはセル数と等しい場合、そのセルは行の最後のセルとして追加されます。 index が省略された場合は、既定で -1 となります。

返値

HTMLTableCellElement で、新しいセルへの参照です。

例外

IndexSizeError DOMException

index がセル数よりも大きい場合に発生します。

例

この例では、 HTMLTableElement.insertRow() を使用して表に新しい行を追加します。

それから insertCell(0) を使用して、新しいセルを新しい行に追加します。（有効な HTML にするためには、 <tr> は 1 つ以上の <td> 要素を持つ必要があります。）最後に、 Document.createTextNode() と Node.appendChild() を使用していくらかのテキストを追加します。

HTML

html
<table id="my-table">
  <tr>
    <td>行 1</td>
  </tr>
  <tr>
    <td>行 2</td>
  </tr>
  <tr>
    <td>行 3</td>
  </tr>
</table>

JavaScript

js
function addRow(tableID) {
  // 表への参照を取得
  let tableRef = document.getElementById(tableID);

  // 表の末尾に行を追加
  let newRow = tableRef.insertRow(-1);

  // 行の 0 の位置にセルを追加
  let newCell = newRow.insertCell(0);

  // セルにテキストノードを追加
  let newText = document.createTextNode("新しい最下行");
  newCell.appendChild(newText);
}

// addRow() を表の ID で呼び出す
addRow("my-table");

結果

仕様書

Specification
HTML Standard
# dom-tr-insertcell-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報