参考资料

1. HTML DOM 返回加载的当前文档的URL实例
2. HTML DOM指定表格的frame
3. HTML DOM 修改
4. HTML DOM shift键被按下了吗？
5. HTML DOM 当点击完button不可用 实例
6. HTML DOM 返回image的name
7. HTML DOM 返回图像映射的某个区域的target的值 实例
8. HTML DOM 返回文档中第一个锚的 innerHTML

HTML DOM删除表格中的行

详细介绍

HTML DOM提供了删除表格行的方法，主要通过deleteRow()方法实现。该方法可以从表格中删除指定的行。

标签

主要涉及HTML表格标签：

• <table> - 定义表格

• <tr> - 定义表格行

• <td> - 定义表格单元格

用法

tableObject.deleteRow(index)

参数：

• index - 必需，指定要删除的行在表中的位置。行的编码顺序就是它们在文档源代码中出现的顺序。<thead>、<tbody>和<tfoot>中的行一起编码。

实例

<table id="myTable" border="1">
  <tr>
    <td>行1，单元格1</td>
    <td>行1，单元格2</td>
  </tr>
  <tr>
    <td>行2，单元格1</td>
    <td>行2，单元格2</td>
  </tr>
</table>
<br>
<button onclick="deleteRow()">删除第一行</button>

<script>
function deleteRow() {
  document.getElementById("myTable").deleteRow(0);
}
</script>

功能

• 从表格中删除指定索引的行

• 可以删除表头、表体或表尾中的行

• 删除行后，后续行的索引会自动调整

CSS扩展

可以为删除操作添加视觉效果：

/* 为表格添加过渡效果 */
table {
  transition: all 0.3s ease;
}

/* 删除时的动画效果 */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.deleting {
  animation: fadeOut 0.5s forwards;
}

JavaScript配合CSS动画：

function deleteRowWithAnimation() {
  const table = document.getElementById("myTable");
  const row = table.rows[0];
  row.classList.add("deleting");
  
  setTimeout(() => {
    table.deleteRow(0);
  }, 500);
}