参考资料

  1. HTML DOM 返回和设置一个iframe中的scrolling属性的值
  2. HTML DOM 哪个元素被按下了?
  3. HTML DOM删除下拉列表中的选项
  4. HTML DOM删除表格中的行
  5. HTML DOM 节点
  6. HTML DOM改变表格边框的宽度
  7. HTML DOM 元素
  8. HTML DOM 返回一个表单的name 实例

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