我用javascript实现了增加数量/减少数量,实时计算总金额,删除该商品,选中商品/反选商品/全选/全反选...的操作。
欢迎指点!~
效果如图:(图片有点大,可以到这里看 http://hiuman.iteye.com/picture/136625)
用到的素材:加号 减号 商品图 删除图标 选中的图标和没选中的图标
代码:
<body onselectstart="return false;" style="-moz-user-select:none;"> <table> <thead> <tr> <th><input type="checkbox"></th> <th>商品信息</th> <th>数量</th> <th>单价<span>(元)</span></th> <th>金额<span>(元)</span></th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td> <img src="./cart/good.png"> <p>小呀小苹果(一)</p> </td> <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td> <td class="per">¥<span>1900</span></td> <td class="money">¥<span>3800</span></td> <td><a class="del"></a></td> </tr> <tr> <td><input type="checkbox"></td> <td> <img src="./cart/good.png"> <p>小呀小苹果(二)</p> </td> <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td> <td class="per">¥<span>1900</span></td> <td class="money">¥<span>3800</span></td> <td><a class="del"></a></td> </tr> <tr> <td><input type="checkbox"></td> <td> <img src="./cart/good.png"> <p>小呀小苹果(三)</p> </td> <td><span class="add"></span><span class="num">3</span><span class="dec"></span></td> <td class="per">¥<span>1900</span></td> <td class="money">¥<span>3800</span></td> <td><a class="del"></a></td> </tr> </tbody> <tfoot> <tr> <td></td> <td>已选:<span class="choosen">0</span>件 共<span class="total">0</span>元</td> <td></td> <td></td> <td></td> <td><button class="sure">结账</button></td> </tr> </tfoot> </table> </body>
*{ margin: 0;padding: 0;list-style: none;font-size: 16px;font-family: 'arial';font-weight: normal; } table{ width: 1020px;margin: 0 auto;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;text-align: center; } table tr{ height: 100px;line-height: 100px; } thead{ background: black;color: white; } thead tr,tfoot tr{ height: 40px;line-height: 40px; } table img{ float: left;width: 65px;height: 65px;margin-top: 18px; } table input[type="checkbox"]{ width: 32px;height: 32px;-webkit-appearance: none;background: url(./cart/checkbox.png) no-repeat center center;vertical-align:middle } tbody td:nth-child(1){ width: 7%; } tbody td:nth-child(2){ width: 35%; } tbody td:nth-child(3){ width: 13%; } tbody td:nth-child(4){ width: 15%; } tbody td:nth-child(5){ width: 15%; } tbody td:nth-child(6){ width: 15%; } tbody tr{ border-bottom: 1px solid black; } table .add,table .dec,table .del{ display: inline-block;width: 14px;height: 21px;cursor: pointer; } table .add{ background: url(./cart/add.png) no-repeat center center; } table .dec{ background: url(./cart/dec.png) no-repeat center center; } table .num{ display: inline-block;width: 57px;margin: 0 18px;height: 39px;line-height: 39px;border: 1px solid #b0b0b0;background: #d4d4d4; } table .del{ width: 18px;background: url(./cart/del.png) no-repeat; } table .money,table .total{ color: red; } table .choosen{ color: #3083ff; } table .sure{ width: 100%;height: 100%;background: #3083ff;color: #fff;border: none;cursor: pointer; } input[type='checkbox']:checked{ background: url(./cart/check.png) no-repeat center center; }
window.onload = function(){ // 按顺序为:list个数 加 数量 减 删 选择框 金额 单价 选中的个数 // list个数 不包括thead var oListNumber = document.getElementsByClassName('add').length; var oAdds = document.getElementsByClassName('add'); var oNums = document.getElementsByClassName('num'); var oDecs = document.getElementsByClassName('dec'); var oDels = document.getElementsByClassName('del'); var oInputs = document.getElementsByTagName('input'); var oMoneys = document.getElementsByClassName('money'); var oPers = document.getElementsByClassName('per'); var oAllChecked = false; //全选 var othercheckbox =0; //除了全选以外的其他checkbox changeMoney(); // checkbox点击事件 for(var i =0;i<oInputs.length;i++){ (function(i){ oInputs[i].onclick = function(){ // 判断除了全选以外的checkbox if(i!=0){ if(oInputs[i].checked ==true){ othercheckbox++ }else{ othercheckbox-- } } // 判断是否全选 if(othercheckbox == oListNumber){ oInputs[0].checked = true; }else{ oInputs[0].checked = false; } // 判断是否选择了全选checkbox if(i==0){ oAllChecked = !oAllChecked; for(var j=0;j<oInputs.length;j++){ oInputs[j].checked=oAllChecked; } if(oAllChecked){ othercheckbox = oListNumber }else{ othercheckbox = 0; } } changeTotal() } })(i) } // add事件 for(var i =0;i<oAdds.length;i++){ (function(i){ oAdds[i].onclick = function(){ oNums[i].innerText = parseInt(oNums[i].innerText) +1; changeMoney() changeTotal() } })(i) } // dec事件 for(var i =0;i<oDecs.length;i++){ (function(i){ oDecs[i].onclick = function(){ if(oNums[i].innerText != '0'){ oNums[i].innerText = parseInt(oNums[i].innerText) -1; } changeMoney() changeTotal() } })(i) } // add事件和dec事件伴随的金额改变事件 function changeMoney(){ var oPerSpan =[]; //单价 var oMoneySpan=[]; //金额 for(var i=0;i<oListNumber;i++){ oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerText; oMoneySpan[i] = oMoneys[i].getElementsByTagName('span')[0]; oMoneySpan[i].innerText = (parseInt(oNums[i].innerText)*parseInt(oPerSpan[i])) } } // del事件 for(var i =0;i<oDels.length;i++){ (function(i){ oDels[i].onclick = function(){ var thisdom = oDels[i].parentNode.parentNode; var tbody = thisdom.parentNode; tbody.removeChild(thisdom) changeTotal() } })(i) } // 总数量 总金额 function changeTotal(){ var oChoosen = document.getElementsByClassName('choosen')[0]; var oTotal = document.getElementsByClassName('total')[0]; var sumNUM = 0 var sumTOTAL =0 for(var i=1;i<oInputs.length;i++){ if(oInputs[i].checked){ sumNUM = parseInt(oNums[i-1].innerText) + parseInt(sumNUM); sumTOTAL = parseInt(oMoneys[i-1].getElementsByTagName('span')[0].innerText) +parseInt(sumTOTAL) } } oChoosen.innerText = sumNUM; oTotal.innerText = sumTOTAL; } }