jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)
更新時(shí)間：2022年06月29日 14:55:44 作者：張阿起
這篇文章主要介紹了jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具一定的參考價(jià)值，感興趣的小伙伴可以參考一下
效果圖
一.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;">結(jié)算中心</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;">單價(jià)</th> <th style="position: absolute;left: 290px;">數(shù)量</th> <th style="position: absolute;left: 370px;"><input type="hidden" value="0" />小計(jì)</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" >結(jié)算</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();
//獲取父元素再獲取父元素的上一個(gè)同胞元素
var Fu=parseFloat($(this).parent().prev().html());
//獲取父元素后獲取父元素下一個(gè)同胞元素
//var FuX=parseFloat($(this).parent().next().html());
if(btn=="+"){
//獲取數(shù)量
var preVa=parseInt($(this).prev().val());
//給數(shù)量加1
$(this).prev().val(preVa+1)
//獲取并賦值數(shù)量
preVa=parseInt($(this).prev().val());
//給父元素下一個(gè)同胞元素賦值,并保留小數(shù)點(diǎn)后兩位
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{
//獲取數(shù)量
var preVa=parseInt($(this).next().val());
if(preVa==0){
return alert("不能再少了！");
}
//給數(shù)量減一
$(this).next().val(preVa-1);
//獲取并賦值元素
preVa=parseInt($(this).next().val());
//給父元素下一個(gè)同胞元素賦值，并保留小數(shù)點(diǎn)后兩位
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()
});
//輸入框發(fā)生變化刷新小計(jì)
$("[type='text']").change(function(){
//獲取元素內(nèi)容
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++){
//不能為小數(shù)或者不能大于100
if(n1[i]=="." || i==2){
$(this).val(0);
return false;
};
};
//獲取單價(jià)
var ptDj=parseFloat($(this).parent().prev().html());
//獲取總額
var ptSum=(ptNum*ptDj).toString();
var newSum="";
//保留小數(shù)點(diǎn)后兩位
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];
}
//設(shè)置小計(jì)
$(this).parent().next().html(newSum);
Smon();
});
});
//計(jì)算總金額
function Smon(){
var sum=0;
//循環(huán)遍歷所有選中按鈕后邊的值
$("[type=checkbox]:checked").each(function(){
//獲取選中按鈕同級(jí)的小計(jì)
var xiaoji=parseFloat($(this).parent().next().next().next().next().html());
//判斷是否是第一行的,isNaN判斷是否可以轉(zhuǎn)數(shù)值
if(isNaN(xiaoji)){
xiaoji=0;
}
sum+=xiaoji;
});
sum=parseFloat(sum).toString();
var newSum="";
//總計(jì)金額默認(rèn)保存小數(shù)點(diǎn)后兩位，循環(huán)拼接并賦值給新的變量
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的長(zhǎng)度
var len2=$("[type=checkbox]:checked").length;
//獲取所有可選中按鈕的長(zhǎng)度
var len3=$("[type=checkbox]").length;
//由于函數(shù)執(zhí)行是按照自上而下，調(diào)用一次執(zhí)行一次的方式，所以當(dāng)?shù)谝淮闻袛噙x中按鈕為5個(gè)時(shí)，就去勾選全選按鈕，
//當(dāng)以后每次判斷再進(jìn)來時(shí)，只會(huì)有兩種結(jié)果，一個(gè)全選是true，一個(gè)全選是false，只需要判斷全選是什么狀態(tài)就將狀態(tài)改變另一個(gè)即可。
if(len2==len3-1 & len==false){
$("#cballS").prop("checked",true);
}else if(len2>=len3-1 & len==true){
$("#cballS").prop("checked",false);
};
//執(zhí)行完調(diào)用總計(jì)函數(shù)
Smon();
};
//刪除，使用函數(shù)調(diào)用完成
function del(th){
var aa=$(th).parent().parent().next().remove();
$(th).parent().parent().remove();
Smon();
};
</script>四.小結(jié)
本章使用所學(xué)jQueryDOM遍歷實(shí)現(xiàn)了一個(gè)實(shí)用簡(jiǎn)易小商城結(jié)算系統(tǒng),實(shí)現(xiàn)方式不只這一種,各位感興趣的小伙伴,可以自行探索.
到此這篇關(guān)于jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)jQuery DOM遍歷 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- jQuery常見的遍歷DOM操作詳解
- jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)
- 舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷
- jQuery遍歷DOM的父級(jí)元素、子級(jí)元素和同級(jí)元素的方法總結(jié)
- jQuery遍歷DOM元素與節(jié)點(diǎn)方法詳解
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- JQuery遍歷DOM節(jié)點(diǎn)的方法
- jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
- jQuery操作Dom元素與遍歷以及JS遍歷詳細(xì)講解
相關(guān)文章
如何快速解決JS或Jquery ajax異步跨域的問題呢？下面小編就為大家分享一篇快速解決Jquery ajax異步跨域問題的方法，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jquery.pager.js實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了jquery.pager.js實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了jQuery中的子元素過濾選擇器,列舉了一些操作DOM時(shí)獲取父元素的一些方法,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
jquery判斷checkbox(復(fù)選框)是否被選中的代碼
現(xiàn)在很多朋友都喜歡使用jquery了，所以很多的表格判斷都是基于jquery的，但實(shí)現(xiàn)方法與javascript原生代碼不同，對(duì)于checkbox的判斷大家可以參考下。2010-10-10
jquery之empty()與remove()區(qū)別說明
要用到移除指定元素的時(shí)候，發(fā)現(xiàn)empty()與remove([expr])都可以用來實(shí)現(xiàn)?？勺屑?xì)觀察效果的話就可以發(fā)現(xiàn)。2010-09-09
這篇文章主要介紹了jQuery 取值、賦值的基本方法,需要的朋友可以參考下2014-03-03
jQuery插件HighCharts繪制簡(jiǎn)單2D折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡(jiǎn)單2D折線圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制折線圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果
這篇文章主要介紹了jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果,涉及jquery通過時(shí)間函數(shù)定時(shí)觸發(fā)頁(yè)面元素樣式變換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jquery任意位置浮動(dòng)固定層插件用法實(shí)例
這篇文章主要介紹了jquery任意位置浮動(dòng)固定層插件用法,實(shí)例分析了jQuery浮動(dòng)層插件的相關(guān)使用技巧,需要的朋友可以參考下2015-05-05