参考资料

1. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
2. HTML DOM删除下拉列表中的选项
3. HTML DOM 返回加载的文档的服务器域名 实例
4. HTML DOM 方法
5. HTML DOM 节点列表
6. HTML DOM 改变一个包含在iframe中的文档的背景颜色
7. HTML DOM 返回文档的标题实例
8. HTML DOM改变下拉列表中被选中的选项的文本

HTML DOM删除表格中的行

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);
}