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="#" 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>&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="#" 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>&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="#" 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>&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="#" 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>&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="#" 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>&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="#" 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遍歷 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: