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

Showing content from https://developer.mozilla.org/ja/docs/Web/API/HTMLTableRowElement/insertCell below:

HTMLTableRowElement: insertCell() メソッド - Web API

Baseline Widely available

HTMLTableRowElement.insertCell() メソッドは、新しいセル (<td>) を表の行 (<tr>) に挿入し、そのセルの参照を返します。

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

ただし、 insertCell() を使用して新しい <th> 要素を作成することはできません。

insertCell()
insertCell(index)

HTMLTableRowElement は HTML の <tr> 要素への参照です。

index 省略可

新しいセルの位置を指定します。 index が -1 またはセル数と等しい場合、そのセルは行の最後のセルとして追加されます。 index が省略された場合は、既定で -1 となります。

HTMLTableCellElement で、新しいセルへの参照です。

IndexSizeError DOMException

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

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

それから insertCell(0) を使用して、新しいセルを新しい行に追加します。（有効な 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