購物車

時間 2019-11-17

標籤購物車简体版

原文原文鏈接

綁定動態建立獲得數據javascript

//添加一個商品
			$("#tab").on("click",".add",function(){
				var num=$(this).next(); //數量
				var parent=$(this).parent().parent().parent();//找當前父元素tr；
				var price=parent.find(".price");
				var price_s=parent.find(".price_s");//金額<span>中
				var out_of_pocket=parent.find(".out_of_pocket"); //實付金額
				var discount=parent.find(".discount"); //折扣
				
				var add_p=new Add_p(num,price,price_s,discount,out_of_pocket);
				//數量單價金額總價
				add_p.addChange();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.1.1.min.js"></script>
		<style>
			#tab{border-collapse: collapse;}
			.num{ width: 20px; text-align: center;}
		</style>
		<script>
			$(document).ready(function(){
			
			function addtd(tr,obj){
				var td=$("<td></td>");// 建立一列
					td.append(obj);
					tr.append(td);
				}
			
				$.ajax({
					type:"get",
					url:"json/Mcatalog.json",
					async:true,
					success:function(data,u){
						var arr=eval(data);//取數據
						var tab=$("#tab tbody");//獲取
						for(var i=0;i<arr.length;i++){
							var tre=$("<tr></tr>");//建立一行
							
							//圖片
							var commodity=$('<img src='+arr[i].src+'>');
							addtd(tre,commodity);
							
							//描述
							var describe=arr[i].pname;
							addtd(tre,describe);
							
							//加
							var span=$("<span></span>")
							var add=$("<button class='add'>+</button>");
							//num
							var num=$("<input type='text' value='"+arr[i].num+"' class='num' />");
							//減
							var minus=$("<button class='minus'>-</button>");
							span.append(add);
							span.append(num);
							span.append(minus);
							addtd(tre,span);
							
							//單價
							var price="¥"+"<span class='price'>"+arr[i].price+"</span>";
							addtd(tre,price);
							
							//金額
							var num=num.val(); //數量
							var price_s=num*arr[i].price;
							var price_sin="¥"+"<span class='price_s'>"+price_s+"</span>"
							addtd(tre,price_sin);
							
							//優惠
							var discount=arr[i].discount;
							var discount_in="¥"+"<span class='discount'>"+discount+"</span>";
							addtd(tre,discount_in);
							
							//實額
							var out_of_pocket=price_s-discount;
							var out_of_pocket_in="¥"+"<span class='out_of_pocket'>"+out_of_pocket+"</span>";
							addtd(tre,out_of_pocket_in);
							
							//刪除
							var delete_this="<a class='delete_this'>刪除</a>";
							addtd(tre,delete_this);
							tab.append(tre);//行加
							
						}//for
						
						var obj_span=$(".out_of_pocket")
						var price_span=new Price(obj_span);
						price_span.priceShow();
						totalclass();
					}//success
					
				});//ajax
				
					//添加一個商品
			$("#tab").on("click",".add",function(){
				var num=$(this).next(); //數量
				var parent=$(this).parent().parent().parent();//找當前父元素tr；
				var price=parent.find(".price");
				var price_s=parent.find(".price_s");//金額<span>中
				var out_of_pocket=parent.find(".out_of_pocket"); //實付金額
				var discount=parent.find(".discount"); //折扣
				
				var add_p=new Add_p(num,price,price_s,discount,out_of_pocket);
				//數量單價金額總價
				add_p.addChange();
				
			})
			
			//減小一個商品
			$("#tab").on("click",".minus",function(){
				var num=$(this).prev(); //數量
				var parent=$(this).parent().parent().parent();//找當前父元素tr；
				var price=parent.find(".price");
				var price_s=parent.find(".price_s");//金額<span>中
				var out_of_pocket=parent.find(".out_of_pocket"); //實付金額
				var discount=parent.find(".discount"); //折扣
				
				var add_p=new Add_p(num,price,price_s,discount,out_of_pocket);
				//數量單價金額總價
				add_p.minusChange();
				
			})
			
				//刪除
			$("#tab").on("click",".delete_this",function(){
					$(this).parent().parent().remove();
					totalclass();
					var obj_span=$(".out_of_pocket")
					var	price_span=new Price(obj_span);
					price_span.priceShow();
			})
			
			
		})//ready
			
			//顯示總價
			function Price(obj){
				this.obj=obj;
			}
			
			Price.prototype.priceShow=function(){
				var sum=0;
				for(var i=0;i<this.obj.length;i++){
					sum+=parseFloat(this.obj[i].innerHTML);
				}
				
				$(".price_show").text(sum);
			}
			
			//商品數量改變
			function Add_p(num_obj,price,price_s_obj,discount,out_of_pocket_obj){
				this.num=num_obj;//數量
				this.price=price;//單價
				this.price_s=price_s_obj; //金額
				this.discount=discount;//折扣
				this.out_of_pocket=out_of_pocket_obj; //總價
				
			}
			
			//加一個
			Add_p.prototype.addChange=function(){
				var num=this.num.val();
				var price=this.price.text();
				var price_s=this.price_s.text();
				var discount=this.discount.text();
				num++;
				this.num.val(num); //賦值
				
				var price_change=price*num;
				this.price_s.text(price_change); //金額
				
				var discount=this.discount.text();//折扣
				var out_of_pocket=price_change-discount;
				this.out_of_pocket.text(out_of_pocket);//實付
				
				var obj_span=$(".out_of_pocket")
				var	price_span=new Price(obj_span);
				price_span.priceShow();//span_show從新計算總價
			}
			//減一個
			Add_p.prototype.minusChange=function(){
					var num=this.num.val();
					var price=this.price.text();
					var price_s=this.price_s.text();
					var discount=this.discount.text();
					num--;
					if(num>=0){
					this.num.val(num); //賦值
					
					var price_change=price*num;
					this.price_s.text(price_change); //金額
					
					var discount=this.discount.text();//折扣
					var out_of_pocket=price_change-discount;//實付金額
					if(out_of_pocket< 0){
						out_of_pocket=0;
					}
					this.out_of_pocket.text(out_of_pocket);//實付
					
				    var obj_span=$(".out_of_pocket")
					var price_span=new Price(obj_span);
					price_span.priceShow();//span_show從新計算總價
				}
			}
			
				
			//商品件數
			function totalclass(){
				var num=$("tbody tr");
				$(".totalclass").text(num.length);
			}
				
		</script>
	</head>
	<body>
	</body>
	<span>購物車(<span class="totalclass"></span>)</span>
		<table id="tab" border="1px" cellpadding="4px">
			<thead>
				<tr>
					<td>商品</td>
					<td>描述</td>
					<td>數量</td>
					<td>單價</td>
					<td>金額</td>
					<td>優惠</td>
					<td>實額</td>
					<td>操做</td>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		總價：<span class="price_show"></span>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。