jQuery利用DOM遍歷實現商城結算系統實戰
效果圖
一.body
<body> <div style="background-color: antiquewhite;width: 500px;height: 450px;border: 1px solid aquamarine;border-radius: 20px;"> <table> <thead align="center"> <p style="text-align: center;"><span style="font-size: 30px;color:mediumslateblue;border: 2px solid red;border-radius: 10px;background-color:navajowhite;">結算中心</span></p> <tr class="tr1"> <th style="position: absolute;"><input type="checkbox" id="cballS">全選</th> <th style="position: absolute;left: 100px;">商品</th> <th style="position: absolute;left: 190px;">單價</th> <th style="position: absolute;left: 290px;">數量</th> <th style="position: absolute;left: 370px;"><input type="hidden" value="0" />小計</th> <th style="position: absolute;left: 450px;">操作</th> </tr> <!--//作為換行使用--> <tr> <td ><p> </p></td> </tr> </thead> <tbody> <tr> <td class="cbAll"><input type="checkbox" id="cball" onclick="chClick()">選中</td> <td style="position: absolute;left: 100px;">vivoX86</td> <td style="position: absolute;left: 190px;">1299.99</td> <td style="position: absolute;left: 260px;"> <input type="button" value="-" style="background-color: aqua;border-radius: 10px;"/> <input type="text" value="0" style="width: 20px;text-align: center;border-radius: 10px;background-color: gold;" /> <input type="button" value="+" style="background-color: blueviolet;border-radius: 10px;"/> </td> <td style="position: absolute;left: 370px;border: 1px solid chartreuse;border-radius: 10px;background-color: salmon;width: 60px;text-align: center;">0</td> <td style="position: absolute;left: 450px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="del(this)" >刪除</a></td> </tr> <!--//作為換行使用--> <tr> <td ><p> </p></td> </tr> <tr class="tr1"> <td class="cbAll"><input type="checkbox" id="cball" onclick="chClick()">選中</td> <td style="position: absolute;left: 100px;">oppoS23</td> <td style="position: absolute;left: 190px;">1399.99</td> <td style="position: absolute;left: 260px;"> <input type="button" value="-" style="background-color: aqua;border-radius: 10px;"/> <input type="text" value="0" style="width: 20px;text-align: center;border-radius: 10px;background-color: gold;"/> <input type="button" value="+" style="background-color: blueviolet;border-radius: 10px;"/> </td> <td style="position: absolute;left: 370px;border: 1px solid chartreuse;border-radius: 10px;background-color: salmon;width: 60px;text-align: center;">0</td> <td style="position: absolute;left: 450px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="del(this)">刪除</a></td> </tr> <!--//作為換行使用--> <tr> <td ><p> </p></td> </tr> <tr> <td class="cbAll"><input type="checkbox" id="cball" onclick="chClick()">選中</td> <td style="position: absolute;left: 100px;">HUAWEIS7</td> <td style="position: absolute;left: 190px;">1499.99</td> <td style="position: absolute;left: 260px;"> <input type="button" value="-" style="background-color: aqua;border-radius: 10px;"/> <input type="text" value="0" style="width: 20px;text-align: center;border-radius: 10px;background-color: gold;"/> <input type="button" value="+" style="background-color: blueviolet;border-radius: 10px;"/> </td> <td style="position: absolute;left: 370px;border: 1px solid chartreuse;border-radius: 10px;background-color: salmon;width: 60px;text-align: center;">0</td> <td style="position: absolute;left: 450px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="del(this)">刪除</a></td> </tr> <!--//作為換行使用--> <tr> <td ><p> </p></td> </tr> <tr> <td class="cbAll"><input type="checkbox" id="cball" onclick="chClick()">選中</td> <td style="position: absolute;left: 100px;">Mi 8s</td> <td style="position: absolute;left: 190px;">1599.99</td> <td style="position: absolute;left: 260px;"> <input type="button" value="-" style="background-color: aqua;border-radius: 10px;"/> <input type="text" value="0" style="width: 20px;text-align: center;border-radius: 10px;background-color: gold;"/> <input type="button" value="+" style="background-color: blueviolet;border-radius: 10px;"/> </td> <td style="position: absolute;left: 370px;border: 1px solid chartreuse;border-radius: 10px;background-color: salmon;width: 60px;text-align: center;">0</td> <td style="position: absolute;left: 450px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="del(this)">刪除</a></td> </tr> <!--//作為換行使用--> <tr> <td ><p> </p></td> </tr> <tr> <td class="cbAll"><input type="checkbox" id="cball" onclick="chClick()">選中</td> <td style="position: absolute;left: 100px;">iPhone13</td> <td style="position: absolute;left: 190px;">1699.99</td> <td style="position: absolute;left: 260px;"> <input type="button" value="-" style="background-color: aqua;border-radius: 10px;"/> <input type="text" value="0" style="width: 20px;text-align: center;border-radius: 10px;background-color: gold;"/> <input type="button" value="+" style="background-color: blueviolet;border-radius: 10px;"/> </td> <td style="position: absolute;left: 370px;border: 1px solid chartreuse;border-radius: 10px;background-color: salmon;width: 60px;text-align: center;">0</td> <td style="position: absolute;left: 450px;"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="del(this)">刪除</a></td> </tr> </tbody> <tfoot> <!--//作為換行使用--> <tr> <td ><p> </p></td> </tr> <tr> <th><span style="background-color:aqua;border:1px solid darkblue;border-radius: 5px;display:inline-block;width: 80px;">總金額</span> : <span id="moneys" style="display:inline-block;width: 100px;background-color: seagreen;border-radius: 10px;">0</span>元</th> <th> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >結算</a></th> </tr> </tfoot> </table> </div> </body>
二.css
<style> .cbAll{ border: 1px solid darkblue; background-color: darkgoldenrod; border-radius: 10px; position:absolute; } </style>
三.JavaScript
<script type="text/javascript" src="js/jquery.min.js" ></script> <script> $(function(){ $("[type=button]").click(function(){ //獲取按鈕 var btn=$(this).val(); //獲取父元素再獲取父元素的上一個同胞元素 var Fu=parseFloat($(this).parent().prev().html()); //獲取父元素後獲取父元素下一個同胞元素 //var FuX=parseFloat($(this).parent().next().html()); if(btn=="+"){ //獲取數量 var preVa=parseInt($(this).prev().val()); //給數量加1 $(this).prev().val(preVa+1) //獲取並賦值數量 preVa=parseInt($(this).prev().val()); //給父元素下一個同胞元素賦值,並保留小數點後兩位 var ptsum=(Fu*preVa).toString(); var newSum=""; for(i=0;i<ptsum.length;i++){ if(ptsum[i]=="."){ if(ptsum[i+1]!=undefined){ newSum+=ptsum[i]+ptsum[i+1]; } if(ptsum[i+2]!=undefined){ newSum+=ptsum[i+2]; } break; } newSum+=ptsum[i]; }; $(this).parent().next().html(newSum); Smon(); }else{ //獲取數量 var preVa=parseInt($(this).next().val()); if(preVa==0){ return alert("不能再少瞭!"); } //給數量減一 $(this).next().val(preVa-1); //獲取並賦值元素 preVa=parseInt($(this).next().val()); //給父元素下一個同胞元素賦值,並保留小數點後兩位 var ptsum=(preVa*Fu).toString(); var newSum=""; for(i=0;i<ptsum.length;i++){ if(ptsum[i]=="."){ if(ptsum[i+1]!=undefined){ newSum+=ptsum[i]+ptsum[i+1]; } if(ptsum[i+2]!=undefined){ newSum+=ptsum[i+2]; } break; } newSum+=ptsum[i]; } $(this).parent().next().html(newSum); Smon(); }; }); //全選按鈕 $("#cballS").click(function(){ var flag=$(this).prop("checked"); $("[type=checkbox]").each(function(){ $(this).prop("checked",flag); }); Smon() }); //輸入框發生變化刷新小計 $("[type='text']").change(function(){ //獲取元素內容 var ptNum=parseFloat($(this).val()); if(ptNum<=0 || isNaN(ptNum)){ $(this).val(0); return false; }; var n1=ptNum.toString(); for(i=0;i<n1.length;i++){ //不能為小數或者不能大於100 if(n1[i]=="." || i==2){ $(this).val(0); return false; }; }; //獲取單價 var ptDj=parseFloat($(this).parent().prev().html()); //獲取總額 var ptSum=(ptNum*ptDj).toString(); var newSum=""; //保留小數點後兩位 for(i=0;i<ptSum.length;i++){ if(ptSum[i]=="."){ if(!isNaN(ptSum[i+1])){ newSum+=ptSum[i]+ptSum[i+1]; if(!isNaN(ptSum[i+2])){ newSum+=ptSum[i+2]; }; break; }; }; newSum+=ptSum[i]; } //設置小計 $(this).parent().next().html(newSum); Smon(); }); }); //計算總金額 function Smon(){ var sum=0; //循環遍歷所有選中按鈕後邊的值 $("[type=checkbox]:checked").each(function(){ //獲取選中按鈕同級的小計 var xiaoji=parseFloat($(this).parent().next().next().next().next().html()); //判斷是否是第一行的,isNaN判斷是否可以轉數值 if(isNaN(xiaoji)){ xiaoji=0; } sum+=xiaoji; }); sum=parseFloat(sum).toString(); var newSum=""; //總計金額默認保存小數點後兩位,循環拼接並賦值給新的變量 for(i=0;i<sum.length;i++){ if(i<=7){ if(sum[i]=="."){ if(sum[i+1]!=undefined){ newSum+=sum[i]+sum[i+1]; } if(sum[i+2]!=undefined){ newSum+=sum[i+2]; } break; } newSum+=sum[i]; } } //賦值 $("#moneys").html(newSum); }; //選中按鈕判斷 function chClick(){ //獲取全選按鈕 var len=$("#cballS").prop("checked"); //獲取所有可選擇的按鈕為true的長度 var len2=$("[type=checkbox]:checked").length; //獲取所有可選中按鈕的長度 var len3=$("[type=checkbox]").length; //由於函數執行是按照自上而下,調用一次執行一次的方式,所以當第一次判斷選中按鈕為5個時,就去勾選全選按鈕, //當以後每次判斷再進來時,隻會有兩種結果,一個全選是true,一個全選是false,隻需要判斷全選是什麼狀態就將狀態改變另一個即可。 if(len2==len3-1 & len==false){ $("#cballS").prop("checked",true); }else if(len2>=len3-1 & len==true){ $("#cballS").prop("checked",false); }; //執行完調用總計函數 Smon(); }; //刪除,使用函數調用完成 function del(th){ var aa=$(th).parent().parent().next().remove(); $(th).parent().parent().remove(); Smon(); }; </script>
四.小結
本章使用所學jQueryDOM遍歷實現瞭一個實用簡易小商城結算系統,實現方式不隻這一種,各位感興趣的小夥伴,可以自行探索.
到此這篇關於jQuery利用DOM遍歷實現商城結算系統實戰的文章就介紹到這瞭,更多相關jQuery DOM遍歷 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!