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 July 2015.

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

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

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

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

構文

js
insertRow()
insertRow(index)

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

引数

index 省略可

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

返値

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

例外

IndexSizeError DOMException

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

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

それから HTMLTableRowElement.insertCell() を使用して新しいセルをその行に追加します。(有効な 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-table-insertrow-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
insertRow

Legend

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

Full support
Full support
See implementation notes.

関連情報