<!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" /><link rel="stylesheet" href="style.css" /><title>购物车</title><style></style></head><body><table><caption><h2>我的购物车</h2></caption><thead><th><input type="checkbox" name="checkAll" id="checkAll" checked /><label for="checkAll">全选</label></th><th>图片</th><th>品名</th><th>单位</th><th>单价/元</th><th>数量</th><th>金额/元</th></thead><tbody><tr><td><input type="checkbox" name="item" class="item" checked /></td><td><img src="images/p1.png" /></td><td>JavaScript权威指南（第七版）</td><td>本</td><td>100</td><td><input type="number" class="num" min="1" value="1" /></td><td class="amount">0</td></tr><tr><td><input type="checkbox" name="item" class="item" checked /></td><td><img src="images/p2.png" /></td><td>JavaScript权威指南（第七版）</td><td>本</td><td>200</td><td><input type="number" class="num" min="1" value="1" /></td><td class="amount">0</td></tr><tr><td><input type="checkbox" name="item" class="item" checked /></td><td><img src="images/p3.png" /></td><td>JavaScript权威指南（第七版）</td><td>本</td><td>300</td><td><input type="number" class="num" min="1" value="1" /></td><td class="amount">0</td></tr><tr><td><input type="checkbox" name="item" class="item" checked /></td><td><img src="images/p4.png" /></td><td>JavaScript权威指南（第七版）</td><td>本</td><td>400</td><td><input type="number" class="num" min="1" value="1" /></td><td class="amount">0</td></tr><tr><td><input type="checkbox" name="item" class="item" /></td><td><img src="images/p5.png" /></td><td>JavaScript权威指南（第七版）</td><td>本</td><td>500</td><td><input type="number" class="num" min="1" value="1" /></td><td class="amount">0</td></tr></tbody><tfoot><tr><td colspan="5">总计</td><td>0</td><td>0</td></tr></tfoot></table><script src="demo.js"></script></body></html>
* {margin: 0;padding: 0;box-sizing: border-box;}html {font-size: 10px;}body {font-size: 1.6rem;}/* table样式 *//* 表格*/table {margin: 0 auto;border-collapse: collapse;}input,label:hover {cursor: pointer;}/* 隔行变色 */tr:nth-of-type(even) {background-color: gainsboro;}caption {margin: 1rem 0;}/* tbody样式 */thead {background-color: green;color: white;}tfoot {background-color: lightblue;}/* 设置边框线 */th,td {text-align: center;padding: 1rem;}/* 图片大小 */td > img {width: 3em;height: 3em;}
/*** 当页面加载成功后计算选中商品的价格和数目* */window.onload = autoCalculate;//获取“全选"按钮元素let checkAllBtn = document.querySelector("#checkAll");//获取多选框元素let checkBoxArr = document.querySelectorAll("input[name='item']");/*** 全选与全不选*/// checkAllBtn.onclick = function (ev) {// checkBoxArr.forEach(function (item) {// item.checked = ev.target.checked;// });// };//上面注释的简化形式checkAllBtn.onclick = (ev) =>checkBoxArr.forEach((item) => (item.checked = ev.target.checked));//每次点击也要计算一次数据checkAllBtn.onchange = autoCalculate;/*** 只有一个没有选中，全选框就不选中*/checkBoxArr.forEach(function (item) {item.onclick = function () {let res = [...checkBoxArr].every(function (ite) {return ite.checked;});checkAllBtn.checked = res;};//每次点击也要计算一次数据item.onchange = autoCalculate;});// 获取产品单价元素let tdPriceArr = document.querySelectorAll("tr >td:nth-of-type(5)");let priceArr = [...tdPriceArr].map(function (ev) {return ev.textContent * 1;});//当数量发生变化的时候获取数量let tdNumArr = document.querySelectorAll(".num");//当每一个数量框发生变化时调用方法autoCalculatetdNumArr.forEach(function (ev) {ev.onchange = autoCalculate;});function autoCalculate() {let numArr = [...tdNumArr].map(function (item) {return item.value * 1;});// let p = [numArr, priceArr].reduce(function (prev, curr) {// let a = prev.map(function (item, index) {// return item * curr[index];// });// return a;// });//上面注释的简化// 计算每种商品的消耗的总金额，数量*单价let o = [numArr, priceArr].reduce((prev, curr) =>prev.map((item, index) => item * curr[index]));// 将价格放到每款产品后面let price = document.querySelectorAll(".amount");price.forEach(function (items, index) {items.textContent = o[index];});/*** 给总计赋值* 获取选中的tr,如果没有选中的tr则默认总计的地方都为0*/let totleNum = document.querySelector("tfoot > tr > td:nth-of-type(2)");let totlePrice = document.querySelector("tfoot > tr > td:nth-of-type(3)");let checkArr = document.querySelectorAll("input[name='item']:checked");// console.log(checkArr.length);if (checkArr.length > 0) {// 获取选中的tr里面的价格let pricecarr = [...checkArr].map(function (ev) {return (ev.parentNode.parentNode.querySelector("td:nth-of-type(5)").textContent * 1);});// 获取选中的tr里面的数量let numcarr = [...checkArr].map(function (ev) {return ev.parentNode.parentNode.querySelector(".num").value * 1;});let c = [numcarr, pricecarr].reduce((prev, curr) =>prev.map((item, index) => item * curr[index]));//总计里面的数据只计算选中的，不选中的不计算totleNum.textContent = numcarr.reduce(function (prev, curr) {return prev + curr;});totlePrice.textContent = c.reduce(function (prev, curr) {return prev + curr;});} else {totleNum.textContent = 0;totlePrice.textContent = 0;}}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
