<!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>
<style>
table {
width: 500px;
height: 300px;
margin: 0 auto;
}
table td {
border: 1px solid;
}
div {
width: 100px;
height: 50px;
margin: 0 auto;
}
</style>
</head>
<body>
<table>
<thead>
<th>商品id</th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</thead>
<tbody></tbody>
</table>
<div>
<input type="checkbox" name="" id="" class="allSel" οnchange="allCheckedFun()">全选：
<br> 总价：
<span class="myTotal" οnchange="calculateTotal()">0</span>
</div>
<script>
var info = [{
id: 1,
goodName: "苹果",
price: 5500,
count: 1,
minSum: 5500,
isChecked: false
}, {
id: 2,
goodName: "华为",
price: 5000,
count: 1,
minSum: 5000,
isChecked: false
}, {
id: 3,
goodName: "小米",
price: 4000,
count: 1,
minSum: 4000,
isChecked: false
}, {
id: 4,
goodName: "红米",
price: 2000,
count: 1,
minSum: 2000,
isChecked: false
}];
var selects = null;
var allSel = document.querySelector(".allSel");
var myTotal = document.querySelector(".myTotal");
var tb = document.querySelector("tbody");
window.onload = function() { //向表格中动态添加数据
var str = "";
for (var i = 0; i < info.length; i++) {
str += `<tr><td><input type="checkbox" name="" value="" οnchange="sel()"></td><td>${info[i].goodName}</td><td>${info[i].price}</td><td><input type="number" id="${info[i].id}" value="${info[i].count}" οnchange="counter(this,${info[i].id})"></td><td>${info[i].minSum}</td><td><input type="button" name="" value="删除" οnclick="del(event,${info[i].id})"></td></tr>`;
}
tb.innerHTML = str;
selects = document.querySelectorAll("table input[type=checkbox]");
}
//选择的功能
function sel() {
var flag = true;
for (var i = 0; i < selects.length; i++) {
if (!(selects[i].checked)) {
flag = false;
break;
}
}
allSel.checked = flag;
calculateTotal(); //total
}
//selectAll
function allCheckedFun() {
for (var i = 0; i < selects.length; i++) {
selects[i].checked = allSel.checked;
}
}
//total
function calculateTotal() {
var sum = 0;
for (var i = 0; i < selects.length; i++) {
if (selects[i].checked) {
sum += parseFloat(selects[i].parentNode.parentNode.children[4].innerHTML);
}
}
myTotal.innerHTML = sum;
}
//商品数量变化和小计
function counter(that, id) {
if (that.value <= 1) { //商品数量不为负
that.value = 1;
}
var count = parseInt(that.value); //获取数量
var price = parseFloat(that.parentNode.parentNode.children[2].innerHTML); //获取单价
that.parentNode.parentNode.children[4].innerHTML = count * price; //小计
//计入总价
calculateTotal();
for (var i = 0; i < info.length; i++) {
if (info[i].id == id) {
info[i].count = count;
info[i].minSum = info[i].count * info[i].price;
}
}
}
//delete
function del(e, id) {
e.target.parentNode.parentNode.parentNode.removeChild(e.target.parentNode.parentNode);
//再次获取选择框
selects = document.querySelectorAll("table input[type=checkbox]"); //写法
console.log(selects);
//删除这一栏，相应的总价也删除
calculateTotal();
//删除源数据
for (var i = 0; i < info.length; i++) {
if (info[i].id == id) {
info.splice(i, 1);
}
}
console.log(info);
}
</script>
</body>
</html>
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
