<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td><input type="checkbox" id="all"></td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>键盘</td>
<td>500</td>
<td>
<button class="minus cal">-</button>
<input type="text" value="1">
<button class="add cal">+</button>
</td>
<td>500</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>鼠标</td>
<td>100</td>
<td>
<button class="minus cal">-</button>
<input type="text" value="1">
<button class="add cal">+</button>
</td>
<td>100</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td colspan="3">总计</td>
<td colspan="3" id="sumTotal"></td>
</tr>
</tbody>
</table>
<script>
/* let _adds=document.querySelectorAll(".add");
_adds.forEach((_add)=>{
_add.onclick=function(){
//获取数量
let _input=this.parentNode.children[1];
//加1
let num=_input.value*1+1;
_input.value=num;
//计算小计
//单价
let price=this.parentNode.previousElementSibling.innerText*1;
let total=price*num; //小计
this.parentNode.nextElementSibling.innerText=total;
}
})
let _minuss=document.querySelectorAll(".minus");
_minuss.forEach((_minus)=>{
_minus.onclick=function(){
//获取数量
let _input=this.parentNode.children[1];
//减1
if(_input.value*1<=1){
return;
}
let num=_input.value*1-1;
_input.value=num;
//计算小计
//单价
let price=this.parentNode.previousElementSibling.innerText*1;
let total=price*num; //小计
this.parentNode.nextElementSibling.innerText=total;
}
})
*/
//计算加减
let _cals = document.querySelectorAll(".cal");
_cals.forEach(_cal => {
_cal.onclick = function () {
//获取操作符
let opera = this.innerHTML;
//获取数量
let _input = this.parentNode.children[1];
//减1
if (_input.value * 1 <= 1 && opera == "-") {
return;
}
//执行加减
let num = eval(_input.value * 1 + opera + 1);
_input.value = num;
//计算小计
//单价
let price = this.parentNode.previousElementSibling.innerText * 1;
let total = price * num; //小计
this.parentNode.nextElementSibling.innerText = total;
//重新计算总计
sumTotal();
}
})
//全选
let _all = document.querySelector("#all"); //全选框
//所有反选框
let _chboxes = document.querySelectorAll("input[type=checkbox]:not(#all)")
_all.onchange = function () {
_chboxes.forEach(_chbox => {
_chbox.checked = this.checked;
})
//重新计算总计
sumTotal();
}
//反选
_chboxes.forEach(_chbox => {
_chbox.onchange = function () {
//获取带checked属性的所有input框
let _checkedboxes = document.querySelectorAll("input:checked:not(#all)");
_all.checked = _checkedboxes.length == _chboxes.length;
//重新计算总计
sumTotal();
}
})
//计算总计
let _sumTotal = document.querySelector("#sumTotal");
function sumTotal() {
//获取带有checked属性的小计
let _checkedboxes = document.querySelectorAll("input:checked:not(#all)");
let sumTotal = 0; //总计
_checkedboxes.forEach(_checkedbox => {
sumTotal += _checkedbox.parentNode.parentNode.children[4].innerText * 1
})
// 存放总计
_sumTotal.innerText = sumTotal;
}
//删除
let _dels = document.querySelectorAll(".del");
_dels.forEach(_del => {
_del.onclick=function(){
if (confirm("确认删除吗?")) {
_del.parentNode.parentNode.remove();
//重新计算总计
sumTotal();
}
}
})
</script>
</body>
</html>