• jQuery用DOM遍历实现商城结算系统

    jQuery用DOM遍历实现商城结算系统

    文章目录

    效果图

    在这里插入图片描述

    一.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>&nbsp;</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="#" onclick="del(this)" >删除</a></td>
					</tr>
					<!--//作为换行使用-->
					<tr>
						<td ><p>&nbsp;</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="#" onclick="del(this)">删除</a></td>
					</tr>
					<!--//作为换行使用-->
					<tr>
						<td ><p>&nbsp;</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="#" onclick="del(this)">删除</a></td>
					</tr>
					<!--//作为换行使用-->
					<tr>
						<td ><p>&nbsp;</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="#" onclick="del(this)">删除</a></td>
					</tr>
					<!--//作为换行使用-->
					<tr>
						<td ><p>&nbsp;</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="#" onclick="del(this)">删除</a></td>
					</tr>
				</tbody>
				<tfoot>
					<!--//作为换行使用-->
					<tr>
						<td ><p>&nbsp;</p></td>
					</tr>
					
					<tr>
						<th><span style="background-color:aqua;border:1px solid darkblue;border-radius: 5px;display:inline-block;width: 80px;">总金额</span>&nbsp;:&emsp;<span id="moneys" style="display:inline-block;width: 100px;background-color: seagreen;border-radius: 10px;">0</span>元</th>
						<th>&emsp;<a href="#">结算</a></th>
					</tr>
				</tfoot>
			</table>
		</div>
	</body>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117

    二.css

    	<style>
			.cbAll{
				border: 1px solid darkblue;
				background-color: darkgoldenrod;
				border-radius: 10px;
				position:absolute;
				
			}
		</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    三.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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192

    四.小结

    本章使用所学jQueryDOM遍历实现了一个实用简易小商城结算系统,实现方式不只这一种,各位感兴趣的小伙伴,可以自行探索.
    有哪里不足或者有更好的建议,欢迎留言吐槽,有哪里不懂的小伙伴,可以私信我,我会一一答复,感谢认可,感谢支持!

  • 相关阅读:
    快速代码补全技巧，快速打印日志创建对象
    leetcode 342. Power of Four（4的次方)
    Python标准库之pickle
    如何使用界面控件Telerik UI for WinForms过滤数据？这里有答案
    yolov8使用opencv2实时检测，两种物品，左上角显示信息
    signature verification failed csb502报错
    分享如何筛选延误三天以上物流件
    流媒体传输协议HTTP-FLV、WebSocket-FLV、HTTP-TS 和 WebSocket-TS的详细介绍、应用场景及对比
    深入Java了解面向对象编程（OOP）
    synchronized原理-字节码分析、对象内存结构、锁升级过程、Monitor
  • 原文地址：https://blog.csdn.net/weixin_45539338/article/details/125451748