Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ja/docs/Web/API/HTMLTableElement/insertRow below:

HTMLTableElement: insertRow() メソッド - Web API

Baseline Widely available

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() を使用してそのセルにテキストを追加します。

<table id="my-table">
  <tr>
    <td>行 1</td>
  </tr>
  <tr>
    <td>行 2</td>
  </tr>
  <tr>
    <td>行 3</td>
  </tr>
</table>

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4