DOM TableRow insertCell() 方法

insertCell() 方法是用于在 HTML 表格中的 tr 元素中插入新的 td 元素。

语法

row.insertCell(index)

参数：

• index：可选参数，表示要在哪个位置插入新的单元格。如果省略，则在行末添加单元格。

返回值：

• 返回新添加的 td 元素。

示例

<table id="myTable">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
  <tr>
    <td>第三行第一列</td>
    <td>第三行第二列</td>
  </tr>
</table>

<script>
  var table = document.getElementById("myTable");
  var row = table.insertRow(2); // 在第 3 行插入新行
  var cell1 = row.insertCell(0); // 在新行中的第 1 列插入单元格
  var cell2 = row.insertCell(1); // 在新行中的第 2 列插入单元格
  cell1.innerHTML = "第三行第一列（新增）";
  cell2.innerHTML = "第三行第二列（新增）";
</script>

说明：

1. 首先获取到要操作的表格 myTable，然后使用 insertRow() 方法在第 3 行位置添加一行(row)。
2. 使用 insertCell() 方法在新行(row)中的第 1 列和第 2 列位置分别添加两个单元格(cell1 和 cell2)。
3. 最后使用 innerHTML 属性修改单元格的文本内容。

兼容性

insertCell() 方法在大多数浏览器中得到了很好的支持，包括 IE6+，但存在一些未知的问题，建议在使用时进行测试。

总结

insertCell() 方法是用于在 HTML 表格中的 tr 元素中插入新的 td 元素，可通过指定位置参数在一行中插入多个单元格，使用方便简单。