这里教大家使用纯html和js脚本结合实现删除表格数据
<!DOCTYPE html>
<html>
<head><style>table {border-collapse: collapse;width: 100%;}th, td {border: 1px solid black;padding: 8px;text-align: left;}</style>
</head>
<body><table id="editableTable"><thead><tr><th>Name</th><th>Age</th><th>Gender</th><th>Action</th></tr></thead><tbody><tr><td contenteditable="true">John Doe</td><td contenteditable="true">25</td><td contenteditable="true">Male</td><td><button onclick="deleteRow(this)">Delete</button></td></tr><tr><td contenteditable="true">Jane Smith</td><td contenteditable="true">30</td><td contenteditable="true">Female</td><td><button onclick="deleteRow(this)">Delete</button></td></tr><!-- 添加更多行 --></tbody></table><script>function deleteRow(btn) {// 获取所在行var row = btn.parentNode.parentNode;// 获取所在表格var table = row.parentNode.parentNode;// 删除行table.deleteRow(row.rowIndex);}</script>
</body>
</html>
代码解释:
在上述示例中,每行的最后一列添加了一个按钮,并为按钮绑定了一个 onclick 事件,调用 deleteRow
函数。
JavaScript 部分的 deleteRow
函数接受按钮作为参数,在函数内部首先获取按钮的父节点,即所在的 <td>
元素,然后再获取 <td>
的父节点,即所在的行 <tr>
元素,最后获取行元素的父节点,即所在的表格 <table>
元素。
最后,调用 deleteRow
方法,将行的索引作为参数,从表格中删除该行。
这样,当用户点击某一行的“Delete”按钮时,相应的行将被删除。在实际项目中,可能需要进一步确认用户是否要删除该行,以及处理删除后的数据更新。
效果演示:
删除前:
点击按钮删除后: