参考资料

1. HTML DOM 返回和设置链接的href属性实例
2. HTML DOM 返回一个表单的name 实例
3. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
4. HTML DOM 返回图像映射某个区域的替代文字实例
5. HTML DOM 节点列表长度
6. HTML DOM 重置表单
7. HTML DOM 返回图像映射的某个区域的hostname实例
8. HTML DOM 给image加上border

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。