DOM

：

HTMLTableElementインターフェイス

：

insertRow メソッド

　 編集：2022.03.11 by T.A.

→MS

そのテーブル内に新しい行を挿入します。

構文
row= HTMLTableElement.insertRow(index);
HTMLTableElement HTMLTableElement。
index 新しい行の行番号（ 0 が 1 行目）

-1 または行数に等しい場合、行は最後の行として追加される。

省略したり、行数より大きい場合、エラーが発生する。

戻り値

挿入した新しい行への参照。¶HTMLTableRowElement。

注釈

テーブル内に既に複数の tbody 要素が存在する場合、新しい行は最後の tbody 要素に挿入されます。

特定の tbody 要素に行を挿入するには、以下の様にします。 

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

HTML 文書を有効なものとするには、tr 要素か td 要素の内、少なくとも一つが必要です。

insertRow は直接テーブルに行を挿入し、新しい行への参照を返します。document.createElement() などで新たに tr 要素を作成する必要はありません。

例
<table id="TableA">
  <tr>
    <td>Old top row</td>
  </tr>
</table>

<script type="text/javascript">

function addRow(tableID) {
  // table 要素への参照を取得し、変数に代入
  var tableRef = document.getElementById(tableID);

  // テーブルのインデックス 0 の行（一行目）に行を挿入
  var newRow   = tableRef.insertRow(0);

  // 一行目にセルを挿入
  var newCell  = newRow.insertCell(0);

  // 作成したセルにテキストノードを挿入
  var newText  = document.createTextNode('New top row')
  newCell.appendChild(newText);
}

// 引数にテーブルの id を指定して関数 addRow() を実行
addRow('TableA');

</script>
テスト
HTML：

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



スクリプト：


スクリプト：



表示内容：
表示内容：