jQuery利用DOM遍历实现商城结算系统实战
目录
- 效果图
- 一.body
- 二.css
- 三.JavaScript
- 四.小结
效果图
一.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遍历 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
jQuery DOM节点的遍历方法小结
本文介绍了jQuery DOM节点的遍历方法小结,分享给大家,也给自己留个笔记 children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系) 节点查找关系 <div class="div"> <ul class="son"> <
-
jQuery常见的遍历DOM操作详解
本文实例总结了jQuery常见的遍历DOM操作.分享给大家供大家参考,具体如下: 向上遍历DOM树 .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历 .parents():返回被选元素的所有祖先元素,一直向上遍历,直到文档的根元素(html) .parentsUntil():返回介于两个给定元素之间的所有祖先元素 <!DOCTYPE html> <html> <head> <style> .ancestors *{ disp
-
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考. 1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方
-
jQuery遍历DOM元素与节点方法详解
本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,
-
jQuery遍历DOM节点操作之filter()方法详解
本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添
-
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
一.jQuery的向下遍历 <script src="../JS/Extend.js"></script> <script src="../JS/my.js"></script> <link type="text/css" rel="stylesheet" href="../CSS3/my.css"> </head> <body&
-
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
如下图,显示了HTML中的结构树,通过 JQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 遍历 - 父级(祖先) 向上遍历DOM数. 通过如下三个方法,我们可以获取父级元素: parent() parents() parentsUntil() 1.JQuery parent() parent() 方法返回被选元素的直接父元素. 该方法只会向上一级对 DOM 树进行遍历. <section
-
JQuery遍历DOM节点的方法
本文实例讲述了JQuery遍历DOM节点的方法.分享给大家供大家参考.具体分析如下: 本节的核心是介绍JQuery的DOM操作,前面介绍了很多创建.删除.替换等等节点操作.这里介绍如何遍历节点,选中临近节点等的一些方法. children()方法 该方法用于取得匹配元素的子元素集合.根据DOM树的结构,可以知道各个元素之间的关系以及它们子节点的个数. 下面使用children()方法来获取匹配元素的所有子元素的个数. var $body = $("body").children();
-
jQuery利用DOM遍历实现商城结算系统实战
目录 效果图 一.body 二.css 三.JavaScript 四.小结 效果图 一.body <body> <div style="background-color: antiquewhite;width: 500px;height: 450px;border: 1px solid aquamarine;border-radius: 20px;"> <table> <thead align="center"> &l
-
Java爬虫实现Jsoup利用dom方法遍历Document对象
先给出网页地址: https://wall.alphacoders.com/featured.php?lang=Chinese 主要步骤: 利用Jsoup的connect方法获取Document对象 String html = "https://wall.alphacoders.com/featured.php?lang=Chinese"; Document doc = Jsoup.connect(html).get(); 内容过长,就不再显示. 我们以这部分为例: <ul cl
-
jQuery中each遍历的三种方法实例分析
本文实例讲述了jQuery中each遍历的三种方法.分享给大家供大家参考,具体如下: 1.选择器+遍历 $('div').each(function (i){ //i就是索引值 //this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function (index,domEle){ //index就是索引值 //domEle 表示获取遍历每一个dom对象 }); 3.更适用的遍历方法 1)先获取某个集合对象 2)遍历集合对象的每一个元素 var d=$(
-
jQuery滚动监听实现商城楼梯式导航效果
话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu
-
jQuery 利用ztree实现树形表格的实例代码
最近公司的项目中要做一个树形表格,因为之前一直在用ztree实现基本的树形结构,理所当然的首先想到利用ztree来做. 网上找了一下别人做的树形表格,有使用ztree的,也有使用treeTable的,但效果都不太好,于是参考使用ztree的做法自己做了一个,贴出来供大家参考,请看注释说明,效果如下所示. <!DOCTYPE HTML> <html> <head> <link href="https://cdn.bootcss.com/zTree.v3/3
-
JQuery插入DOM节点的方法
本文实例讲述了JQuery插入DOM节点的方法.分享给大家供大家参考.具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中.将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点.前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容. 将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示.读者可以根据实际需求灵活地做出多种选择. HTML DOM结构如下: <p class
-
jQuery向父辈遍历的简单方法
通过DOM树可以可容易的访问到html文档中的所有元素 例如向上访问父辈的元素有以下方法 1.parent()方法可以得到所定元素的直接父元素 $("span").parent();得到<span>元素的直接父元素 2.parents()方法得到给定元素的所有父元素 $("span").parents();得到<span>元素的所有父元素 $("span").panents(".text");得到<
-
jquery对dom节点的操作【推荐】
1.JavaScript脚本放在哪里才好? 1.当有些函数 需调用才执行或者有些事件需触发才执行的脚本,我们可以将脚本放在HTML的head部分中,这样可以保证脚本在任何调用之前已经被加载. 2.当页面加载时 需执行的脚本可以放在HTML的body部分,这类脚本通常被用来生成页面的内容. 3.当页面加载后 需立即执行的脚本,我们可以放在最后,文档加载之后执行.所幸的是,Jquery有事件控制,所以,这部分我们可以下载 head 引用的外部文件中. 2.jquery的常用函数 如:children