body源码
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.container .table img {
width: 100px;
}
.container .table .num {
width: 80px;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<tr class="active">
<th class=" text-center">
<input type="checkbox" id="checkall">
<label for="checkall">全选</label>
</th>
<th class="text-center">商品图片</th>
<th class="text-center">商品名称</th>
<th class="text-center">单价</th>
<th class="text-center">数量</th>
<th class="text-center">总价</th>
<th class="text-center">操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkone"></td>
<td>
<a href="#"><img
src="https://gw.alicdn.com/bao/uploaded/i2/673558948/O1CN01brR2Zd2FyElr61Yre_!!0-item_pic.jpg_300x300q90.jpg_.webp"
alt=""></a>
</td>
<td style="width:400px">周大生非凡金黄金手链女足金古法平安喜乐手串金珠生日礼物送女友</td>
<td class="price">4000</td>
<td class="oper">
<button class="btn btn-default sub">-</button>
<input type="text" class="num" value="1">
<button class="btn btn-default add">+</button>
</td>
<td class="tprice">4000</td>
<td>
<button class="btn btn-primary delone">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkone"></td>
<td>
<a href="#"><img
src="https://gw.alicdn.com/bao/uploaded/i3/2206734510149/O1CN01QpNQGu1CyHma82O7h_!!0-item_pic.jpg_300x300q90.jpg_.webp"
alt=""></a>
</td>
<td style="width:400px">2022云南百香果5斤整箱大果当季新鲜水果紫皮百香浓果酱现摘包邮</td>
<td class="price">20.8</td>
<td class="oper">
<button class="btn btn-default sub">-</button>
<input type="text" class="num" value="1">
<button class="btn btn-default add">+</button>
</td>
<td class="tprice">20.8</td>
<td>
<button class="btn btn-primary delone">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkone"></td>
<td>
<a href="#"><img
src="https://gw.alicdn.com/bao/uploaded/i3/4140296235/O1CN0133BbRm1vvgEQ3xrVX_!!0-item_pic.jpg_300x300q90.jpg_.webp"
alt=""></a>
</td>
<td style="width:400px">选顺丰送保护壳 天猫精灵IN糖智能音箱蓝牙音响家用语音小闹钟时钟早教学习机器人工家电旗舰官店方旗舰方糖2</td>
<td class="price">58</td>
<td class="oper">
<button class="btn btn-default sub">-</button>
<input type="text" class="num" value="1">
<button class="btn btn-default add">+</button>
</td>
<td class="tprice">58</td>
<td>
<button class="btn btn-primary delone">删除</button>
</td>
</tr>
<tr>
<td colspan="7">
<button class="btn btn-primary delall">删除</button>
已选<span class="total">1</span>件
<div class="pull-right">
总价：<span class="sum">0</span>元
</div>
</td>
</tr>
</table>
</div>
</body>
js代码
<script>
var ckAll = document.querySelector("#checkall"); //全选按钮
var ckOne = document.querySelectorAll(".checkone"); //单个复选框按钮
var addBtn = document.querySelectorAll(".add"); //增加按钮
var subBtn = document.querySelectorAll(".sub"); //减少按钮
var price = document.querySelectorAll(".price"); // 单价
var tprice = document.querySelectorAll(".tprice"); //总价
var delOne = document.querySelectorAll(".delone"); //单个删除按钮
var sum = document.querySelector(".sum"); //总价
var total = document.querySelector(".total"); //件数
var num = document.querySelectorAll(".num") //获取所有input单选框
var oper = document.querySelectorAll(".oper"); //数量增减的td标签
var delAll = document.querySelector(".delall"); //全部删除按钮
//全选
ckAll.onchange = function () {
ckOne.forEach(item => { //遍历单个复选框
item.checked = ckAll.checked;
});
//调用总价
getSum();
}
//所有商品选中状态与全选按钮对应
ckOne.forEach(item => {
item.onchange = function () {
// ckAll.checked = Array.from(ckOne).every(item => {
// return item.checked === true;
// })
// ckAll.checked = Array.from(ckOne).every(item => item.checked === true);
checkPro();
getSum();
}
})
function checkPro() { //单个复选框封装函数，检测是否被选中
ckOne = document.querySelectorAll(".checkone");
if (ckOne.length === 0) {
ckAll.checked = false;
return;
}
ckAll.checked = Array.from(ckOne).every(item => item.checked === true);
}
//数量的增加
addBtn.forEach((item, i) => { //增加按钮遍历
item.onclick = function () {
// console.log();
+this.previousElementSibling.value++;
if (this.previousElementSibling.value > 1) {
this.previousElementSibling.previousElementSibling.classList.remove("disabled");
}
tprice[i].innerText = price[i].innerText * this.previousElementSibling.value; //tprice[i]单行总价的索引
getSum();
}
})
//数量的减少
subBtn.forEach((item, i) => { //数量减少按钮
item.onclick = function () {
// console.log();
+this.nextElementSibling.value--;
if (this.nextElementSibling.value <= 1) {
this.nextElementSibling.value = 1;
this.classList.add("disabled"); //该标签属性增加禁用状态
}
tprice[i].innerText = price[i].innerText * this.nextElementSibling.value;
getSum();
}
})
//单个商品删除
delOne.forEach(item => {
item.onclick = function () {
var t = confirm("请确定要删除该商品吗？");
if (t) {
this.parentElement.parentElement.remove();
}
checkPro();//单个商品的选中检测
getSum();//所有商品的小计总价
}
})
//小计
function getSum() {
ckOne = document.querySelectorAll(".checkone"); //重新引用单个复选框
var s = 0, t = 0; //s是总价，t是件数
ckOne.forEach((item, i) => {//遍历所有单个商品的复选框
if (item.checked) { //如果单个商品的复选框是选中状态
s += +item.parentElement.parentElement.getElementsByClassName("tprice")[0].innerText; //单个商品的总价进行叠加求和
t += +item.parentElement.parentElement.getElementsByClassName("oper")[0].children[1].value;//单个商品的数量进行叠加求和
}
});
sum.innerHTML = s;
total.innerHTML = t;
}
//第二种方式
// function getSum() {
// sum.innerHTML = Array.from(ckOne).reduce(function (tot, item) {
// if (item.checked) {
// var s = +item.parentElement.parentElement.getElementsByClassName("tprice")[0].innerText;
// }
// return tot + s;
// }, 0)
// }
getSum(); //调用小计函数
//删除所有选中商品
delAll.onclick = function () { //删除全部按钮点击状态
ckOne.forEach(item => {
if (item.checked) {
item.parentElement.parentElement.remove();
}
});
getSum();
checkPro();
}
</script>
4029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
