前端有一个批量删除按钮<button id="allDeleteBtn">批量删除</button>,要求通过该按钮删除所有class="c1"的已经被勾选的复选框所对应的那一行数据
时间: 2023-12-26 18:07:02 浏览: 20
假设每个被勾选的复选框所在的行都是一个`<tr>`元素,该行数据的其他信息也都在该`<tr>`元素内,可以通过以下代码实现:
```javascript
document.getElementById("allDeleteBtn").addEventListener("click", function() {
var c1Checkboxes = document.querySelectorAll(".c1:checked"); //获取所有已勾选的class="c1"复选框
for (var i = 0; i < c1Checkboxes.length; i++) { //遍历已勾选的复选框
var row = c1Checkboxes[i].parentNode.parentNode; //获取该复选框所在的<tr>元素
row.parentNode.removeChild(row); //删除<tr>元素
}
});
```
当点击批量删除按钮时,先通过`document.querySelectorAll`方法获取所有已勾选的class="c1"复选框,然后通过循环遍历已勾选的复选框。对于每个已勾选的复选框,使用`parentNode`属性两次获取其所在的`<tr>`元素,再使用`parentNode.removeChild`方法将该`<tr>`元素从DOM树中删除,从而达到删除整行数据的目的。
相关问题
前端有一个批量删除按钮<button id="allDeleteBtn">批量删除</button>,要求通过该按钮删除所有class="c1"的已经被勾选的复选框
可以通过以下代码实现:
```javascript
document.getElementById("allDeleteBtn").addEventListener("click", function() {
var c1Checkboxes = document.querySelectorAll(".c1:checked"); //获取所有已勾选的class="c1"复选框
for (var i = 0; i < c1Checkboxes.length; i++) { //遍历已勾选的复选框
c1Checkboxes[i].parentNode.removeChild(c1Checkboxes[i]); //删除复选框
}
});
```
当点击批量删除按钮时,先通过`document.querySelectorAll`方法获取所有已勾选的class="c1"复选框,然后通过循环遍历已勾选的复选框,并使用`parentNode.removeChild`方法将其从DOM树中删除。
前端以该格式<tr><td><input type="checkbox" class="c1"></td><td>01(pid)</td><td>毛巾(pname)</td><td>生活用品(cname)</td><td><form action="deleteProductByPid.action">展示数据库信息,数据库有两个表,类别表category表里有cid和cname,商品表product表里有pid、pname和外键cid。该需求的代码
根据您的需求,我可以提供一个简单的前端页面代码示例,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品列表</title>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>编号</th>
<th>商品名称</th>
<th>商品类别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="c1"></td>
<td>01</td>
<td>毛巾</td>
<td>生活用品</td>
<td>
<form action="deleteProductByPid.action" method="POST">
<input type="hidden" name="pid" value="01">
<button type="submit">删除</button>
</form>
</td>
</tr>
<!-- 其他商品信息的展示 -->
</tbody>
</table>
</body>
</html>
```
在这个示例中,我们使用了HTML的表格(table)元素来展示商品列表,并为每个商品添加了一个复选框和删除按钮。当用户勾选复选框并点击删除按钮时,会向后端发送一个POST请求,请求地址为`deleteProductByPid.action`,请求参数为商品的编号(pid)。同时,我们假设后端会根据商品的编号查询数据库并删除对应的记录。
需要注意的是,这个示例中并没有展示如何从数据库中获取商品信息的后端代码,因此在实际应用中,您还需要编写后端代码来处理请求并返回商品信息。此外,这个示例中的样式也非常简陋,您可以根据实际需求添加更多的样式和交互效果。