TableRow insertCell() 方法

HTML DOM TableRow 對象

定義和用法

insertCell() 方法將單元格插入到當前行中。

提示：請使用 deleteCell() 方法 刪除當前表格行中的單元格。

另請參閱：

HTML 參考手冊：HTML <tr> 標簽

實例

例子 1

在 id="myRow" 的表格行的開頭插入包含內容的新單元格：

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

親自試一試

頁面下方提供更多實例。

語法

tablerowObject.insertCell(index)
參數 描述
index

在 Firefox 和 Opera 中是必需的，在 IE、Chrome 和 Safari 中是可選的。

數值（從 0 開始），規定新單元格在當前行中的位置。

值 0 將導致新單元格插到第一個位置。也可以使用 -1 的值，這將導致新單元格插入到最后一個位置。

如果省略此參數，在 IE 中 insertCell() 將在最后一個位置、在 Chrome 和 Safari 中將在第一個位置插入新單元格。

技術細節

返回值：

插入的單元格元素。

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

更多實例

例子 2

在 id="myRow" 的表格行末尾插入包含內容的新單元格：

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

親自試一試

例子 3

在 id="myRow" 的表格行的索引位置 2 處插入包含內容的新單元格：

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

親自試一試

例子 4

在第一個表格行的開頭插入新單元格。表的 rows 集合 (.rows[0]) 返回表中 id 為 "myTable" 的所有 <tr> 元素的集合。

數字 [0] 規定要檢索的元素，在此例中，是第一個表格行。然后我們使用 insertcell() 在索引位置 -1 插入新的單元格：

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

親自試一試

例子 5

從 id="myRow" 的表行中刪除第一個單元格：

var row = document.getElementById("myRow");
row.deleteCell(0);

親自試一試

例子 6

在表的開頭插入新行。

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";

親自試一試

HTML DOM TableRow 對象