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 2015年7月.
HTMLTableRowElement.insertCell() メソッドは、新しいセル (<td>) を表の行 (<tr>) に挿入し、そのセルの参照を返します。
メモ:
insertCell() はセルを直接行に挿入します。 Document.createElement() を使用して新しい <td> 要素を作成した場合のように、 Node.appendChild() を使用して個別にセルを追加する必要はありません。
ただし、 insertCell() を使用して新しい <th> 要素を作成することはできません。
構文
insertCell()
insertCell(index)
HTMLTableRowElement は HTML の <tr> 要素への参照です。
引数
index省略可-
新しいセルの位置を指定します。
indexが-1またはセル数と等しい場合、そのセルは行の最後のセルとして追加されます。indexが省略された場合は、既定で-1となります。
返値
HTMLTableCellElement で、新しいセルへの参照です。
例外
IndexSizeErrorDOMException-
indexがセル数よりも大きい場合に発生します。
例
この例では、 HTMLTableElement.insertRow() を使用して表に新しい行を追加します。
それから insertCell(0) を使用して、新しいセルを新しい行に追加します。（有効な HTML にするためには、 <tr> は 1 つ以上の <td> 要素を持つ必要があります。）最後に、 Document.createTextNode() と Node.appendChild() を使用していくらかのテキストを追加します。
HTML
<table id="my-table">
<tr>
<td>行 1</td>
</tr>
<tr>
<td>行 2</td>
</tr>
<tr>
<td>行 3</td>
</tr>
</table>
JavaScript
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 |
ブラウザーの互換性
Loading…
関連情報
HTMLTableElement.insertRow()- セルを表す HTML 要素:
HTMLTableCellElement