JS使用模板字符串实现动态删除HTML表格数据
时间: 2024-05-16 07:16:58 浏览: 14
可以使用模板字符串和JavaScript的DOM操作来实现动态删除HTML表格数据。以下是一个示例代码:
```javascript
// 获取表格和删除按钮
const table = document.getElementById('my-table');
const deleteBtn = document.getElementById('delete-btn');
// 绑定删除按钮的点击事件
deleteBtn.addEventListener('click', () => {
// 获取选中的行
const selectedRows = Array.from(table.querySelectorAll('input[type="checkbox"]:checked'))
.map(checkbox => checkbox.closest('tr'));
// 删除选中的行
selectedRows.forEach(row => row.remove());
// 更新表格的序号
const rows = table.querySelectorAll('tr');
for (let i = 1; i < rows.length; i++) {
const row = rows[i];
row.querySelector('td:first-child').textContent = i;
}
});
// 在表格中添加一些数据
for (let i = 1; i <= 5; i++) {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${i}</td>
<td>数据${i}</td>
<td><input type="checkbox"></td>
`;
table.appendChild(tr);
}
```
在这个示例中,我们首先获取表格和删除按钮的元素,然后为删除按钮绑定点击事件。当点击删除按钮时,我们首先获取选中的行,然后使用 `forEach` 方法逐个删除这些行。为了更新表格的序号,我们遍历每一行并将其第一个单元格的文本内容更新为当前行的序号。
最后,我们使用一个循环向表格中添加一些数据以供演示。你可以将其中的数据替换为你自己的数据。