HTMLTableElement: insertRow() メソッド

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月⁩.

HTMLTableElement.insertRow() メソッドは、新しい行を表す (<tr>) をこの<table> に挿入し、その新しい行への参照を返します。

表に複数の<tbody> 要素があった場合、既定では、新しい行は最後の<tbody> に挿入されます。指定した<tbody> にこの行を挿入するには、次のようにします。

let specific_tbody = document.getElementById(tbody_id);let row = specific_tbody.insertRow(index);

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

構文

insertRow()insertRow(index)

HTMLTableElement は HTML の<table> 要素への参照です。

引数

index省略可: 新しい行の位置です。index が-1 または行数と同じであった場合は、最後の行として追加されます。index を省略した場合の既定値は-1 です。

返値

新しい行を参照するHTMLTableRowElement です。

例外

IndexSizeErrorDOMException: index が行数よりも大きい場合に発生します。

例

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

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

HTML

html

<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");