<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>购物车</title> <style> table{ margin: 0 auto; 600px; height: auto; /* border: 1px solid black;*/ border-collapse: collapse; } td{ border: 1px solid black; line-height: 40px; font-size: 25px; text-align: center; } .btnl,.btnr{ border-style: none; outline: none; } .txt{ border-style: none; text-align: center; 15px; } </style> </head> <body> <table> <tr> <td><button class="btn">全选</button></td> <td>序号</td> <td>名称</td> <td>价钱</td> <td>数量</td> <td>小计</td> <td>操作</td> </tr> <tr class="trde"> <td><input class="box"type="checkbox"></td> <td>1</td> <td>毛衣</td> <td><span class="price">99</span>￥</td> <td><button class="btnl">-</button><input class="txt" type="text" value="1"><button class="btnr">+</button></td> <td style=" 150px;" ><span class="smallprice">99</span>￥</td> <td><button class="btndelte">删除</button></td> </tr> <tr class="trde"> <td><input class="box" type="checkbox"></td> <td>2</td> <td>羽毛球</td> <td><span class="price">199</span>￥</td> <td><button class="btnl">-</button><input class="txt"type="text" value="1"><button class="btnr">+</button></td> <td><span class="smallprice">99</span>￥</td> <td><button class="btndelte">删除</button></td> </tr> <tr class="trde"> <td><input class="box"type="checkbox"></td> <td>3</td> <td>运动鞋</td> <td><span class="price">899</span>￥</td> <td><button class="btnl">-</button><input class="txt" type="text" value="1"><button class="btnr">+</button></td> <td><span class="smallprice">899</span>￥</td> <td><button class="btndelte">删除</button></td> </tr> <tr class="trde"> <td><input class="box"type="checkbox"></td> <td>4</td> <td>篮球</td> <td><span class="price">699</span>￥</td> <td><button class="btnl">-</button><input class="txt"type="text" value="1"><button class="btnr">+</button></td> <td><span class="smallprice">699</span>￥</td> <td><button class="btndelte">删除</button></td> </tr> <tr> <td><button class="btnf">反选</button></td> <td colspan="6"><span>总计：<span class="tottal">0</span></span><button class="jiesuan">去结算</button></td> </tr> </table> <script> var btnleft=document.getElementsByClassName("btnl"); var btnright=document.getElementsByClassName("btnr"); var txt=document.getElementsByClassName("txt"); var price=document.getElementsByClassName("price"); var smallprice=document.getElementsByClassName("smallprice"); var tottal=document.getElementsByClassName("tottal")[0]; var totta=0; var btn=document.getElementsByClassName("btn")[0]; var btnf=document.getElementsByClassName("btnf")[0]; var box=document.getElementsByClassName("box"); var btndelte=document.getElementsByClassName("btndelte"); var trde=document.getElementsByClassName("trde"); //1.先获取数量的左右按钮 //利用for循环来遍历所有按钮 for(var i=0;i<btnleft.length;i++){ //获得每一个按钮的索引 由于按钮 数量文本框的索引值都是相同的 因而通过索引对索引来改变数量 btnleft[i].index=i; btnleft[i].onclick=function(){ var val=txt[this.index].value; val--; if(val<=1){ val=1; } txt[this.index].value=val; addsmall(this.index); tottalprice(); }; btnright[i].index=i; btnright[i].onclick=function(){ var val=txt[this.index].value; val++; txt[this.index].value=val; addsmall(this.index); tottalprice(); }; box[i].onclick=function(){//5.当点击box时计算总价 tottalprice(); }; btndelte[i].index=i; btndelte[i].onclick=function(){ trde[this.index].remove();//6.删除不要的物品 for(var k=0;k<trde.length;k++){ trde[k].index=k; btndelte[k].index=k;//更新索引 ：删除一行，索引必须重新赋值 } } } //2.通过数量与price来计算小计 function addsmall(index){ smallprice[index].innerText=(txt[index].value*price[index].innerText) } //3.计算总价 让所有小计相加赋值给totta function tottalprice(){ totta=0; for(var i=0;i<smallprice.length;i++){ if(box[i].checked){ totta+=parseFloat (smallprice[i].innerText); } } tottal.innerText=totta; } //4.全选，反选计算总价 btn.onclick=function(){ for(var i=0;i<box.length;i++){ box[i].checked=true; } tottalprice() }; btnf.onclick=function(){ for(var i=0;i<box.length;i++){ box[i].checked=!box[i].checked; } tottalprice() }; </script> </body> </html>