テーブル insertRow() メソッド

HTML DOM Table オブジェクト

定義と使用法

insertRow() メソッドは空の <tr>要素 それをテーブルに追加します。

insertRow() メソッドはテーブルの指定されたインデックス位置に新しい行を挿入します。

注意：<tr>要素は<tr>要素または<td>要素を含まなければなりません。

ヒント：次のように使用してください： deleteRow()メソッド 行を削除します。

も参照してください：

HTMLリファレンスマニュアル：HTML <tr> タグ

実例

例 1

テーブルの最初の位置に新しい行を挿入（内容を持つ<td>要素を含む）：

// id="myTable"の<table>要素を探します：
var table = document.getElementById("myTable");
// 空の<tr>要素を作成し、テーブルの最初の位置に追加：
var row = table.insertRow(0);
// 「新しい」<tr>要素の最初と第2位置に新しいセル（<td>要素）を挿入：
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// 新しいセルにテキストを追加：
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

自分で試してみてください

例 2

行の作成と削除：

function myCreateFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(0);
}

自分で試してみてください

構文

tableObject.insertRow(index)
パラメータ 説明
index

FirefoxおよびOperaでは必須ですが、IE、Chrome、Safariではオプションです。

数値は、挿入する行の位置を定義します（0から始まる）。値 0 は、新しい行が最初の位置に挿入されることを意味します。

値 -1 を使用することもできます。これにより、最後の位置に新しい行を挿入します。

このパラメータを省略すると、insertRow() は Chrome、IE、Firefox、Opera で最後の位置および Safari で最初の位置に新しい行を挿入します。

技術的詳細

返り値： 挿入された <tr> 要素。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート

HTML DOM Table オブジェクト