jQuery怎么利用DOM遍历实现商城结算系统
短信预约 -IT技能 免费直播动态提醒
今天小编给大家分享一下jQuery怎么利用DOM遍历实现商城结算系统的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
效果图
一.body
<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>二.css
<style>.cbAll{border: 1px solid darkblue;background-color: darkgoldenrod;border-radius: 10px;position:absolute;}</style>三.JavaScript
<script type="text/javascript" class="lazy" data-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++){//不能为小数或者不能大于100if(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遍历实现商城结算系统”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
