代码：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>tr {display: block;border-bottom: 1px dotted #dcdcdc;}td {width: 100px;text-align: center;}img {width: 80px;height: 80px;}input {width: 30px;text-align: center;}.bottom {width: 640px;height: 80px;line-height: 80px;margin-top: 10px;border: 1px solid #dcdcdc;}.qjs {width: 80px;height: 50px;background-color: red;color: white;font-size: 16px;border: 0;margin-left: 15px;}.jq::after {content: "￥";}.xj::after {content: "￥";}.del {cursor: pointer;}.del:hover{color: red;}.alldel {padding-left: 16px;cursor: pointer;}.red {color: red;}.alldel:hover {color: red;}.qlc {cursor: pointer;}.qlc:hover {color: red;}.trtop{height: 40px;}.spzj{margin-left: 95px;}</style></head><body><table class="tabzong"><tr class="trtop"><td><input type="checkbox" class="allchecked" />全选</td><td>商品</td><td>单价</td><td>商品数量</td><td>小计</td><td>操作</td></tr><tr><td><input type="checkbox" class="dx" /></td><td><imgsrc="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg"alt=""/></td><td class="jq">5</td><td><button class="jian" disabled>-</button><input type="text" value="1" /><button class="jia">+</button></td><td class="xj">5</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx" /></td><td><imgsrc="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e"alt=""/></td><td class="jq">3</td><td><button class="jian" disabled>-</button><input type="text" value="1" /><button class="jia">+</button></td><td class="xj">3</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx" /></td><td><imgsrc="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e"alt=""/></td><td class="jq">10</td><td><button class="jian" disabled>-</button><input type="text" value="1" /><button class="jia">+</button></td><td class="xj">10</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx" /></td><td><imgsrc="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066"alt=""/></td><td class="jq">20</td><td><button class="jian" disabled>-</button><input type="text" value="1" /><button class="jia">+</button></td><td class="xj">20</td><td class="del">删除</td></tr></table><div class="bottom"><span style="margin-right: 30px" class="alldel">删除所选商品</span><span class="qlc">清理购物车</span><span class="spzj">已经选中<span class="red">0</span>件商品总价:<span class="red">0￥</span></span><button class="qjs">去结算</button></div></body><script>// 第二种方式let body = document.body;let qlc = document.querySelector(".qlc");qlc.onclick = function () {body.innerHTML = `<table class="tabzong"><tr><td><input type="checkbox" class="allchecked">全选</td><td>商品</td><td>单价</td><td>商品数量</td><td>小计</td><td>操作</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg" alt=""></td><td class="jq">5</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">5</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e" alt=""></td><td class="jq">3</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">3</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e" alt=""></td><td class="jq">10</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">10</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066" alt=""></td><td class="jq">20</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">20</td><td class="del">删除</td></tr></table><div class="bottom"><span style="margin-right: 30px;" class="alldel">删除所选商品</span><span class="qlc">清理购物车</span><span style="margin-left: 110px;" class="spzj">已经选中<span class="red">0</span>件商品总价: <span class="red">0￥</span></span><button class="qjs">去结算</button></div>`;z();};z();function z() {let body = document.body;let qlc = document.querySelector(".qlc");qlc.onclick = function () {body.innerHTML = `<table class="tabzong"><tr><td><input type="checkbox" class="allchecked">全选</td><td>商品</td><td>单价</td><td>商品数量</td><td>小计</td><td>操作</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://img.alicdn.com/i2/2204920870409/O1CN01mobmIm1EtMniYVU0J_!!2204920870409.jpg" alt=""></td><td class="jq">5</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">5</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://imgservice.suning.cn/uimg1/b2c/image/gKRneKhFHGnB1oh0Imoxcg.jpg_800w_800h_4e" alt=""></td><td class="jq">3</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">3</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://imgservice.suning.cn/uimg1/b2c/image/ZzNpZsy4U3v8WgTbKqfN3A.jpg_800w_800h_4e" alt=""></td><td class="jq">10</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">10</td><td class="del">删除</td></tr><tr><td><input type="checkbox" class="dx"></td><td><img src="https://img2.baidu.com/it/u=4280167200,1529131522&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1066" alt=""></td><td class="jq">20</td><td><button class="jian" disabled>-</button><input type="text" value="1"><button class="jia">+</button></td><td class="xj">20</td><td class="del">删除</td></tr></table><div class="bottom"><span style="margin-right: 30px;" class="alldel">删除所选商品</span><span class="qlc">清理购物车</span><span style="margin-left: 110px;" class="spzj">已经选中<span class="red">0</span>件商品总价: <span class="red">0￥</span></span><button class="qjs">去结算</button></div>`;z();};let dx = document.querySelectorAll(".dx");let allchecked = document.querySelector(".allchecked");// 小计let xj = document.querySelectorAll(".xj");// 商品总价let spzj = document.querySelector(".spzj");allchecked.onclick = function () {dx.forEach((item) => {item.checked = allchecked.checked;if (item.checked) { item.parentNode.parentNode.style.background='#eeeeee'} else {item.parentNode.parentNode.style.background='white'}});if(allchecked.checked){x=dx.length}else{x=0}add();};// 总价let zongjia = 0;// 商品数量let x = 0;dx.forEach((item) => {item.onclick = function () {if (item.checked) {x++;zongjia +=+item.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText;item.parentNode.parentNode.style.background='#eeeeee'} else {x--;zongjia -=+item.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText;item.parentNode.parentNode.style.background='white'}spzj.innerHTML = `已经选中<span class="red">${x}</span>件商品总价: <span class="red">${zongjia}￥</span></span>`;// 单选控制全选let alltype = true;dx.forEach((dxitem) => {if (!dxitem.checked) {alltype = false;}});allchecked.checked = alltype;};});// 总价函数function add() {zongjia = 0;let dx = document.querySelectorAll(".dx");x=0dx.forEach((item) => {if (item.checked) {x++zongjia +=+item.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText;}});spzj.innerHTML = `已经选中<span class="red">${x}</span>件商品总价: <span class="red">${zongjia}￥</span></span>`;}// 清理购物车// 第一种方式// let qlc = document.querySelector('.qlc')// qlc.onclick=function(){// location.reload();// }// 第二种方式let jian = document.querySelectorAll(".jian");let jia = document.querySelectorAll(".jia");jian.forEach((item) => {item.onclick = function () {if (--item.nextElementSibling.value > 1) {item.parentNode.nextElementSibling.innerText =item.nextElementSibling.value *item.parentNode.previousElementSibling.innerText;add();} else {item.parentNode.nextElementSibling.innerText =item.nextElementSibling.value *item.parentNode.previousElementSibling.innerText;item.disabled = true;add();}};});jia.forEach((item) => {item.onclick = function () {if (+item.previousElementSibling.value == 5) {alert("最多只能买5件");} else {item.previousElementSibling.value++;item.parentNode.nextElementSibling.innerText =item.previousElementSibling.value *item.parentNode.previousElementSibling.innerText;console.log(item.parentNode.nextElementSibling.innerText);item.previousElementSibling.previousElementSibling.disabled = false;add();}};});// 删除let del = document.querySelectorAll(".del");del.forEach((item) => {item.onclick = function () {item.parentNode.remove();add();};});// 删除所选let alldel = document.querySelector(".alldel");alldel.onclick = function () {dx.forEach((dxitem) => {if (dxitem.checked) {dxitem.parentNode.parentNode.remove();}});add();};}</script>
</html>
效果图：
