TableRow insertCell()メソッド
例
id = "myRow"のテーブル行の先頭にコンテンツを含む新しいセルを挿入します。
var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";
定義と使用法
insertCell()メソッドは、現在の行にセルを挿入します。
ヒント:deleteCell()メソッドを使用して、現在のテーブル行のセルを削除します。
ブラウザのサポート
Method | |||||
---|---|---|---|---|---|
insertCell() | Yes | Yes | Yes | Yes | Yes |
構文
tablerowObject.insertCell(index)
パラメータ値
Value | Description |
---|---|
index | Required in Firefox and Opera, optional in IE, Chrome and Safari. A number (starts at 0) that specifies the position of the new cell in the current row. The value of 0 results in that the new cell will be inserted at the first position. The value of -1 can also be used; which results in that the new cell will be inserted at the last position. If this parameter is omitted, insertCell() inserts the new cell at the last position in IE and at the first position in Chrome and Safari. This parameter is required in Firefox and Opera, but optional in Internet Explorer, Chrome and Safari. |
技術的な詳細
戻り値: | 挿入されたセル要素 |
---|
その他の例
例
id = "myRow"のテーブル行の最後にコンテンツを含む新しいセルを挿入します。
var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";
例
id = "myRow"のテーブル行のインデックス位置2にコンテンツを含む新しいセルを挿入します。
var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";
例
最初のテーブル行の先頭に新しいセルを挿入します。テーブル行コレクション(.rows [0])は、IDが「myTable」のテーブル内のすべての<tr>要素のコレクションを返します。数値[0]は、この例では最初のテーブル行を取得する要素を指定します。次に、insertcell()を使用して、インデックス位置-1に新しいセルを挿入します。
var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";
例
id = "myRow"のテーブル行から最初のセルを削除します。
var row = document.getElementById("myRow");
row.deleteCell(0);
例
テーブルの先頭に新しい行を挿入します。insertRow()メソッドは、テーブル内の指定されたインデックスに新しい行を挿入します。この例では、id = "myTable"を持つテーブルの最初の位置(先頭)です。次に、insertCell()メソッドを使用して、新しい行にセルを追加します。
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";
❮TableRowオブジェクト