Shopping mall-like shopping cart based on JQuery

Product information uses JSON data to simulate

multiple clicks on the same product. It will not be added repeatedly, but the quantity will be 1 based on the existing one.

The product quantity can also be entered manually. When you enter 0, the product will be automatically deleted from the shopping cart (click the minus sign to less than 1, you will also be prompted whether to delete the product information from the shopping cart)

The price and total price of each product will be based on the added and Deletion operation to dynamically calculate

Attached download link: /201112/yuanma/jquery_gouwuche.rar

The basic functions have been implemented. It is recommended to use IE browser to run. Other browsers have not been tested HTML code:

Copy code The code is as follows: 无标题文档 商品列表 编号: 000001

名称： aa

价格： 2.5

描述： aaaaa

编号: 000001

名称： aa

价格： 2.5

描述： aaaaa

编号: 000001

名称： aa

价格： 2.5

描述： aaaaa

编号: 000001

名称： aa

价格： 2.5

描述： aaaaa

购物车 序号 编号 名称 描述 数量 单价 总价 删除 1 000001 aa aaaaa 0 0 总价 0.0 JS code Copy code The code is as follows: /* @@ @@ @@ */ var product=[ {prodId:"000001",prodName:"aa",price:2.5,description:"aaaaa"}, {prodId:"000002",prodName:"bb",price:2.4,description:"bbbbb"}, {prodId:"000003",prodName:"cc",price:2.3,description:"ccccc"}, {prodId:"000004",prodName:"dd",price:2.2,description:"ddddd"}, {prodId:"000005",prodName:"ee",price:2.1,description:"eeeee"}, {prodId:"000006",prodName:"ff",price:2.0,description:"fffff"}, {prodId:"000007",prodName:"gg",price:1.9,description:"ggggg"}, {prodId:"000008",prodName:"hh",price:1.8,description:"hhhhh"}, {prodId:"000009",prodName:"ii",price:1.7,description:"iiiii"} ]; var j=0,i=-1,k=-1,len=$("#trMaster td").size();//数据和模板的td 都可以自定义，格式正确即可 $.each(product,function(index,prod){ i ; k ; if(i%len==0){ j ; CloneTR(j);//根据模板来克隆行 } if(k==len) k=0; setTD(j,k,prod.prodId,prod.prodName,prod.price,prod.description);//给克隆行的td 赋值 }); //根据模板来克隆行 function CloneTR(id){ $("#trMaster").clone(true).css("display","block").attr("id","tr" id).appendTo("#tblProduct"); $("#tr" id " td span").empty(); } //给克隆行的td 赋值 function setTD(trId,index,prodId,prodName,price,description){ var tr=$("#tr" trId); $(tr).find("td:eq(" index ")").find("span:eq(0)").html(prodId); $(tr).find("td:eq(" index ")").find("span:eq(1)").html(prodName); $(tr).find("td:eq(" index ")").find("span:eq(2)").html(price); $(tr).find("td:eq(" index ")").find("span:eq(3)").html(description); } var tempId=""; var num=0; //点击buy $("input[name='btnBuy']").click(function(){ var elem=$(this).parent().parent();//获取点击的button 的td var prodId=$(elem).find("span:eq(0)").html(); var prodName=$(elem).find("span:eq(1)").html(); var price=$(elem).find("span:eq(2)").html(); var description=$(elem).find("span:eq(3)").html(); if(prodId==""||prodId==null||prodId==undefined){ alert("请点击其他产品"); }else{ if(tempId.indexOf(prodId)!=-1){ if(confirm('已存在，确定数量 1 吗?')){ $("#tblOrder tr:gt(1)").each(function(){ if($(this).find("td:eq(1)").html()==prodId){ var num=$(this).find("td:eq(4)").find("input[name='txtNum']").attr("value"); $(this).find("td:eq(4)").find("input[name='txtNum']").attr("value", num 1);//相当于parseInt(num) 1; } }); } }else{ num ; CloneOrder(num,prodId,prodName,price,description); } tempId =prodId ","; $("#tdTotal").html(" " GetTotalPrice().toFixed(2) " "); } }); //根据订单模板来clone 订单 function CloneOrder(id,prodId,prodName,price,description){ $("#orderMarter").clone(true).css("display","block").attr("id","tro" id).appendTo("#tblOrder"); var tr=$("#tro" id); $(tr).find("td:eq(0)").html(num); $(tr).find("td:eq(1)").html(prodId); $(tr).find("td:eq(2)").html(prodName); $(tr).find("td:eq(3)").html(description); $(tr).find("td:eq(4)").find("input[name='txtNum']").attr("value","1"); $(tr).find("td:eq(5)").html(price); $(tr).find("td:eq(6)").html(" " price " "); } //获取总共价格 function GetTotalPrice(){ var totalNum=0; $("#tblOrder tr:gt(1)").each(function(){ var value=parseFloat($(this).find("td:eq(6)").text()); totalNum =value; }); return totalNum; } $(function(){ $("#tblOrder input[name='txtNum']").bind("propertychange",function(){ var value=$(this).val(); var tr=$(this).parent().parent(); if(value==0){ if(confirm('确定要删除该商品吗?')){ $(tr).remove(); } }else{ var price=$(tr).find("td:eq(5)").html(); var total=value*price; $(tr).find("td:eq(6)").html(" " total.toFixed(2) " "); $("#tdTotal").html(" " GetTotalPrice().toFixed(2) " "); } }); //加1 $("#tblOrder input[name='btnAdd']").click(function(){ var txtBox=$(this).parent().parent().find("td:eq(4)").find("input[name='txtNum']"); var value=$(txtBox).attr("value"); value= value 1; $(txtBox).attr("value",value) }); //Minus 1 $("#tblOrder input[name='btnCut']").click(function(){ var txtBox=$(this).parent().parent ().find("td:eq(4)").find("input[name='txtNum']"); var tr=$(this).parent().parent(); var value=$(txtBox).attr("value"); if(value>1){ value= value-1; $(txtBox).attr("value",value ) }else{ if(confirm('Are you sure you want to delete this product?')){ $(tr).remove(); $("#tdTotal").html (" " GetTotalPrice().toFixed(2) " "); } } }); //Delete btnRemove $("#tblOrder input[name='btnRemove']").click(function(){ var tr=$ (this).parent().parent(); if(confirm('Are you sure you want to delete this product?')){ $(tr).remove(); $("# tdTotal").html(" " GetTotalPrice().toFixed(2) " " ); } }); });

序号	编号	名称	描述	数量	单价	总价	删除
1	000001	aa	aaaaa		0	0

Shopping mall-like shopping cart based on JQuery_jquery

商品列表

购物车