jQuery利用DOM遍历实现商城结算系统实战
更新时间：2022年06月29日 14:55:44 作者：张阿起
这篇文章主要介绍了jQuery利用DOM遍历实现商城结算系统实战，文章围绕主题展开详细的内容介绍，具一定的参考价值，感兴趣的小伙伴可以参考一下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
效果图
一.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="http://9i0i.com/pic.php?p=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遍历 内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
如何快速解决JS或Jquery ajax异步跨域的问题呢？下面小编就为大家分享一篇快速解决Jquery ajax异步跨域问题的方法，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了jquery.pager.js实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了jQuery中的子元素过滤选择器,列举了一些操作DOM时获取父元素的一些方法,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了jQuery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
现在很多朋友都喜欢使用jquery了，所以很多的表格判断都是基于jquery的，但实现方法与javascript原生代码不同，对于checkbox的判断大家可以参考下。2010-10-10
要用到移除指定元素的时候，发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。2010-09-09
这篇文章主要介绍了jQuery 取值、赋值的基本方法,需要的朋友可以参考下2014-03-03
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件HighCharts绘制简单2D折线图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制折线图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jquery实现通用的内容渐显Tab选项卡效果,涉及jquery通过时间函数定时触发页面元素样式变换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了jquery任意位置浮动固定层插件用法,实例分析了jQuery浮动层插件的相关使用技巧,需要的朋友可以参考下2015-05-05
最新评论