HTMLTableRowElement：insertCell() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLTableRowElement 接口的 insertCell() 方法将一个新单元格（）插入到表行（）中，然后返回新单元格的引用。

备注： insertCell() 将单元格直接插入行中，如果使用 Document.createElement() 创建新的 元素，则不需要使用 Node.appendChild() 单独追加单元格。

你不能使用 insertCell() 来创建一个新的 元素。

语法

js
insertCell()
insertCell(index)

参数

index 可选

新单元格的单元格索引，如果 index 是 -1 或者等于单元格数，新单元格附加到行的最后一个单元格。如果省略 index，则默认值是 -1。

返回值

一个引用新单元格的 HTMLTableCellElement。

异常

IndexSizeError DOMException

如果 index 大于单元格数，则抛出此异常。

示例

此示例使用 HTMLTableRowElement.insertCell() 将新的单元格附加到行中。

HTML

html

  
    

      C1
      C2
      C3
      C4
      C5
    

  
  
    

      单元格 1
      单元格 2
    

  






第一行有 2 个单元格。

JavaScript

js
// 获取相关接口元素
const bodySection = document.querySelectorAll("tbody")[0];
const row = bodySection.rows[0]; // 选择表格体部分的第一行
const cells = row.cells; // 集合是动态的，因此总是最新的
const cellNumberDisplay = document.querySelectorAll("output")[0];

const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");

function updateCellNumber() {
  cellNumberDisplay.textContent = cells.length;
}

addButton.addEventListener("click", () => {
  // 在第一行的末尾添加单元格
  const newCell = row.insertCell();
  newCell.textContent = `单元格 ${cells.length}`;

  // 更新行数
  updateCellNumber();
});

removeButton.addEventListener("click", () => {
  // 从表格体删除行
  row.deleteCell(-1);

  // 更新行数
  updateCellNumber();
});

结果

规范

Specification
HTML
# dom-tr-insertcell-dev

浏览器兼容性

参见