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