今天小編給大家分享一下jQuery怎么利用DOM遍歷實現商城結算系統的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
<body> <div > <table> <thead align="center"> <p ><span >結算中心</span></p> <tr class="tr1"> <th ><input type="checkbox" id="cballS">全選</th> <th >商品</th> <th >單價</th> <th >數量</th> <th ><input type="hidden" value="0" />小計</th> <th >操作</th> </tr> <!--//作為換行使用--> <tr> <td ><p> </p></td> </tr> </thead> <tbody> <tr> <td class="cbAll"><input type="checkbox" id="cball" onclick="chClick()">選中</td> <td >vivoX86</td> <td >1299.99</td> <td > <input type="button" value="-" /> <input type="text" value="0" /> <input type="button" value="+" /> </td> <td >0</td> <td ><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 >oppoS23</td> <td >1399.99</td> <td > <input type="button" value="-" /> <input type="text" value="0" /> <input type="button" value="+" /> </td> <td >0</td> <td ><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 >HUAWEIS7</td> <td >1499.99</td> <td > <input type="button" value="-" /> <input type="text" value="0" /> <input type="button" value="+" /> </td> <td >0</td> <td ><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 >Mi 8s</td> <td >1599.99</td> <td > <input type="button" value="-" /> <input type="text" value="0" /> <input type="button" value="+" /> </td> <td >0</td> <td ><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 >iPhone13</td> <td >1699.99</td> <td > <input type="button" value="-" /> <input type="text" value="0" /> <input type="button" value="+" /> </td> <td >0</td> <td ><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 >總金額</span> : <span id="moneys" >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>
<style>
.cbAll{
border: 1px solid darkblue;
background-color: darkgoldenrod;
border-radius: 10px;
position:absolute;
}
</style><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>以上就是“jQuery怎么利用DOM遍歷實現商城結算系統”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
