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>
にこの行を挿入するには、次のようにします。
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
です。
例外
IndexSizeError
DOMException
-
index
が行数よりも大きい場合に発生します。
例
この例では insertRow(-1)
を使用して、表に新しい行を追加します。
それから HTMLTableRowElement.insertCell()
を使用して新しいセルをその行に追加します。(有効な 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 Standard # dom-table-insertrow-dev |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
HTMLTableRowElement.insertCell()
- 行を表す HTML 要素:
HTMLTableRowElement