表格的全选、删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background-color: cornsilk;
}
table {
text-align: center;
border: 1px solid #ccc;
width: 800px;
margin: 10% auto;
}
table caption {
font-size: 24px;
padding: 10px;
}
table thead th {
background-color: #CCCCCC;
}
label.count,
label.money {
padding: 0 5px;
color: red;
font-weight: bolder;
}
</style>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
全选/全不选 15'
删除当前行（要有提示） 15'
数据行复选框 10'
*/
/* 在这里填写jquery代码，禁止修改html代码 */
$(function(){
$("#chkAll").change(function(){
var chk=$(this).prop("checked")
$(":checkbox").prop("checked",chk)
})
})
$(function(){
$("button").click(function(){
alert("亲亲，你确定要删除编号为1001的商品?");
$("tbody>tr:first").remove();
})
})
$(function(){
$(":checkbox").change(function(){
var i= 0
var y= 0
$(":checkbox:not([id])").each(function(index,item){
var ck =$(item).prop("checked");
if(ck){
i++;
y += parseInt($(item).closest("tr").children().eq(3).text())
}
})
$(".money").text(y);
$(".count").text(i);
})
})
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<caption>购物车商品管理</caption>
<thead>
<tr>
<th>
<input type="checkbox" id="chkAll" />
<label for="chkAll">全选</label>
</th>
<th>产品编号</th>
<th>产品名称</th>
<th>产品单价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1001</td>
<td>Redmi 笔记本 15寸</td>
<td>5999</td>
<td><button type="button" data-del="1001">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1003</td>
<td>华为平板2</td>
<td>2999</td>
<td><button type="button" data-del="1003">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1004</td>
<td>华为笔记本电脑</td>
<td>6888</td>
<td><button type="button" data-del="1004">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1005</td>
<td>小米10青春版</td>
<td>1299</td>
<td><button type="button" data-del="1005">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: right;">您已选购<label class="count">0</label>件，合计<label
class="money">0</label>元</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果：
浙公网安备 33010602011771号