DOM

：

HTMLTableRowElementインターフェイス

：

insertCell プロパティ

　 編集：2022.03.11 by T.A.

→MS

そのテーブル行に新規セルを挿入し、セルへの参照を返します。

構文
cell= HTMLTableRowElement.insertCell(index)
HTMLTableRowElement HTMLTableRowElement。
index 新しいセルのセル インデックス

index が -1 またはセル数と同じである場合は、セルは行内の最後のセルとして挿入される。

index が省略されているか行のセル数より大きい場合は IndexSizeError が発生する。

戻り値

新しいセルへの参照。¶HTMLTableCellElement。

注意

対象テーブルを有効な HTML とするには、tr 要素が最低でもひとつ td 要素を持っていなければなりません。

insertCell はテーブルにセルを直接的に挿入して新しい参照を返すものである事に注意して下さい。このメソッドを用いる場合、予め document.createElement() によって td 要素を生成する必要はありません。

例
<table>
  <tr id="row0">
    <td>Original cell</td>
  </tr>
</table>

<script type="text/javascript">

function addCell(tableRowID) {
  // 引数に指定された id によりテーブル行要素への参照を取得
  var rowRef = document.getElementById(tableRowID);

  // セルインデックス 0 の箇所にセルを挿入
  var newCell   = rowRef.insertCell(0);

  // セルにテキストノードを追加
  var newText  = document.createTextNode('New cell')
  newCell.appendChild(newText);
}

// 対象テーブル行の id をパラメータとし、関数 addCell を実行
addCell('row0');

</script>
テスト
HTML：

ここに表示
スクリプト組み込み：



スクリプト：


スクリプト：



表示内容：
表示内容：