HTML DOM TableRow deleteCell() 方法

简介

deleteCell() 方法是用于删除 HTML 表格中 元素下的一个 元素，如果已经没有 元素，则该行 也将被删除。

语法

tableRow.deleteCell(index)

参数

• index：一个数字，表示要删除的 元素在 标签中的位置，从左到右，从 0 开始计算。

返回值

• 无返回值。

示例

<table id="myTable">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

<button onclick="deleteCell()">删除第二个单元格</button>

<script>
function deleteCell() {
  var table = document.getElementById("myTable");
  var row = table.rows[1];
  row.deleteCell(1);
}
</script>

解释

上述示例中，我们指定了一个 id 为 "myTable" 的表格，其中包含两行数据，每行包含三个单元格。通过按钮点击事件，我们调用了 deleteCell() 方法删除第二行的第二个单元格，即数字 5 所在的单元格。

注意事项

• 要使用 deleteCell() 方法，必须先获取到要删除的 元素。
• 如果要删除的单元格是在一个 元素的右边，则该单元格的位置会向左移动。
• 如果要删除的单元格是在最后一个 元素，则直接删除该 元素所在的行。
• 删除单元格后，如果该行已经没有 元素，则该行也将被删除。
• 在删除多个单元格时，应该满足删除的单元格位置是按从左到右排列的序列，否则会导致结果出错。