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
# dom-tr-insertcell-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertCell
index parameter can be -1
index parameter is optional

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報