tr td 样式 行后面加删除按钮
时间: 2023-09-09 20:14:40 浏览: 59
要实现在每行的最后一列添加删除按钮,可以通过以下步骤实现:
1. 在每行最后一个 `<>` 元素中添加一个 `<button>` 元素,用于触发删除操作。
2. 为每个 `<button>` 元素添加一个点击事件,当点击时触发删除操作。
3. 在删除操作中,获取当前行的索引,并使用 JavaScript 的 `remove()` 方法删除该行。
下面是一个简单的示例代码,可以参考实现:
```html
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>100元</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td>商品2</td>
<td>200元</td>
<td><button class="delete-btn">删除</button></td>
</tr>
<tr>
<td>商品3</td>
<td>300元</td>
<td><button class="delete-btn">删除</button></td>
</tr>
</tbody>
</table>
<script>
// 获取所有删除按钮
const deleteBtns = document.querySelectorAll('.delete-btn');
// 绑定点击事件
deleteBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
// 获取当前行
const row = btn.parentNode.parentNode;
// 删除当前行
row.remove();
});
});
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)