<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; margin: 0 auto; }
table { width: 50%; margin-top: 30px; }
th { background-color: rgb(7, 243, 38); }
th, tr { height: 30px; text-align: center; } </style> </head>
<body> <table border="1px" cellspacing="0" cellspacing="0" id="tab1"> <thead> <tr> <th>商品名称</th> <th>数量</th> <th>单价</th> <th>小计</th> <th>操作</th> </tr> </thead>
<tbody> <tr> <td>烧煎饼</td> <td><button>-</button><span class="goods-num">0</span><button>+</button></td> <td>单价：<span class="goods-psrice">2</span></td> <td>小计：<span class="goods-single-price">0</span></td> <td>操作：<input type="button" value="删除" class="sel"></td> </tr> <tr> <td>水煮鱼</td> <td><button>-</button><span class="goods-num">0</span><button>+</button></td> <td>单价：<span class="goods-price">15</span></td> <td>小计：<span class="goods-single-price">0</span></td> <td>操作：<input type="button" value="删除" class="sel"></td> </tr> </tbody>
<tr> <td colspan="5">一共<span id="goods-total-num">0</span>件商品，共计花费<span id="goods-total-price">0</span>元</td> </tr> </table> <!-- 第二个表格 --> <table id="tab2" cellspacing=0 cellpadding=0 border=""> <tr> <th>序号</th> <th>商品名称</th> <th>单价</th> <th>操作</th> </tr> <tr> <td>1</td> <td>烧饼</td> <td>单价：<span>9</span></td> <td>操作：<input type="button" id="addbtn" value="添加"></td> </tr> <tr> <td>2</td> <td>孜然烤肉</td> <td>单价：<span>22</span></td> <td>操作：<input type="button" id="addbtn" value="添加"></td> </tr> </table> </body>
</html> <script> class Cart { //计算共有多少件商品 getGoodsnum() { let OGoodsnum = document.getElementsByClassName("goods-num"); let goodstotalnum = 0; for (let i = 0; i < OGoodsnum.length; i++) { goodstotalnum += Number(OGoodsnum[i].innerHTML); } let oGoodstotalnum = document.querySelector("#goods-total-num"); oGoodstotalnum.innerHTML = goodstotalnum; } //计算共花费多少 getGoodsPrice() { let Ogoodssingleprice = document.getElementsByClassName("goods-single-price"); let goodstotalprice = 0; for (var i = 0; i < Ogoodssingleprice.length; i++) { goodstotalprice += Number(Ogoodssingleprice[i].innerHTML); } let Ogoodstotalprice = document.querySelector("#goods-total-price"); Ogoodstotalprice.innerHTML = goodstotalprice; } //计算小计 getGoodsSinglePrice(num, price) { return num * price; } //增加货物数量 Goodadd(btn) { //获取btn前的货物数量 let goodsnum = btn.previousElementSibling; goodsnum.innerHTML = Number(goodsnum.innerHTML) + 1; //获取单价 let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML; //计算小计 let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);//50 let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; goodssingleprice.innerHTML = Ogoodssinglepc; //点击增加数量的同时，总数量和总价也要变化 this.getGoodsnum(); this.getGoodsPrice(); } //减少货物数量 Goodmin(btn) { //获取btn前的货物数量 let goodsnum = btn.nextElementSibling; goodsnum.innerHTML = Number(goodsnum.innerHTML) - 1; //获取单价 let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML; //计算小计 let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);//50 let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild; goodssingleprice.innerHTML = Ogoodssinglepc; //点击增加数量的同时，总数量和总价也要变化 this.getGoodsnum(); this.getGoodsPrice(); } //删除事件 select(sel) { let otr = sel.parentNode.parentNode; otr.remove(); //点击删除的同时，总数量和总价也要变化 this.getGoodsnum(); this.getGoodsPrice(); } //测试绑定事件 testbtn() { let obtn = document.querySelectorAll("button"); let that = this; for (let i = 0; i < obtn.length; i++) { if (i % 2 == 1) { obtn[i].onclick = function () { that.Goodadd(this); } } else { obtn[i].onclick = function () { that.Goodmin(this); } } } } //删除事件 selbtn() { let oselbtn = document.querySelectorAll(".sel"); let that = this; for (let i = 0; i < oselbtn.length; i++) { oselbtn[i].onclick = function () { that.select(this); } } } } var ca = new Cart(); //必须调用才有效果 // ***************************************************************** //第二个表格 class cartTwo { addmenu() { let oaddbtn = document.querySelectorAll("#addbtn"); let otab1 = document.querySelector("#tab1 tbody")//获取第一个表格 for (let i = 0; i < oaddbtn.length; i++) { oaddbtn[i].onclick = function () { let menuadd = this.parentNode.previousElementSibling.previousElementSibling; let menupvice = this.parentNode.previousElementSibling; //es6字符串拼接字符串 let str = `<tr> <td>${menuadd.innerHTML}</td> <td><button>-</button><span class="goods-num">0</span><button>+</button></td> <td>${menupvice.innerHTML}</td> <td>小计：<span class="goods-single-price">0</span></td> <td>操作：<input type="button" value="删除" class="sel"></td> </tr>`; otab1.innerHTML += str;//将创建的字符串拼接到第一个表格的tbody中 // 调用事件 ca.selbtn(); ca.testbtn(); } } } } let cT = new cartTwo(); cT.addmenu(); </script>