使用JQuery 实现类似购物商城的购物车
2011-12-06 18:20
597 查看
使用JQuery Clone 模板来实现商品信息的展示,展现形式可以通过修改模板中的td来确定每一行显示多少个商品信息
商品信息使用JSON数据来模拟
同一个产品点击多次,不会重复添加,而是在已有的基础上数量+1,
商品数量也可以手动输入,当输入0时,该商品将自动从购物车删除(点击减号到小于1时,也会提示是否从购物车删除商品信息)
每个产品的价格和总价都会根据添加和删除的操作来动态计算
附下载链接:http://files.cnblogs.com/xffy1028/JQuery%E8%B4%AD%E7%89%A9%E8%BD%A61.rar
基本的功能都已经实现, 建议使用IE6,7,8,浏览器运行,其他浏览器没有测试
View Code
http://s.click.taobao.com/t_11?e=%2BtSC5ziSlHPn2KeJMhhJbsldWfV6oeO4H5ymIt%2FCkol6sjcJDrF11IBQVx%2B2TRc%3D&p=mm_32233099_3201984_10539553
商品信息使用JSON数据来模拟
同一个产品点击多次,不会重复添加,而是在已有的基础上数量+1,
商品数量也可以手动输入,当输入0时,该商品将自动从购物车删除(点击减号到小于1时,也会提示是否从购物车删除商品信息)
每个产品的价格和总价都会根据添加和删除的操作来动态计算
附下载链接:http://files.cnblogs.com/xffy1028/JQuery%E8%B4%AD%E7%89%A9%E8%BD%A61.rar
基本的功能都已经实现, 建议使用IE6,7,8,浏览器运行,其他浏览器没有测试
View Code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> /* @@ @@ @@ */ 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"} ]; </script> <script type="text/javascript"> 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("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>"); } }); //根据订单模板来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("<font color='red'>"+price+"</font>"); } //获取总共价格 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 change blur",function(){ var value=$(this).val(); var tr=$(this).parent().parent(); if(value==0){ if(confirm('确定要删除该商品吗?')){ var prodId=$(tr).find("td:eq(1)").html(); tempId=tempId.replace(prodId+",",""); $(tr).remove(); } }else{ var price=$(tr).find("td:eq(5)").html(); var total=value*price; $(tr).find("td:eq(6)").html("<font color='red'>"+total.toFixed(2)+"</font>"); $("#tdTotal").html("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>"); } }); //加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) }); //减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('确定要删除该商品吗?')){ var prodId=$(tr).find("td:eq(1)").html(); tempId=tempId.replace(prodId+",",""); $(tr).remove(); $("#tdTotal").html("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>"); } } }); //删除btnRemove $("#tblOrder input[name='btnRemove']").click(function(){ var tr=$(this).parent().parent(); if(confirm('确定要删除该商品吗?')){ var prodId=$(tr).find("td:eq(1)").html(); tempId=tempId.replace(prodId+",",""); $(tr).remove(); $("#tdTotal").html("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>"); } }); }); </script>
http://s.click.taobao.com/t_11?e=%2BtSC5ziSlHPn2KeJMhhJbsldWfV6oeO4H5ymIt%2FCkol6sjcJDrF11IBQVx%2B2TRc%3D&p=mm_32233099_3201984_10539553
相关文章推荐
- 基于JQuery实现的类似购物商城的购物车
- 基于JQuery实现的类似购物商城的购物车
- 使用session技术来实现网上商城购物车的功能
- jQuery实现类似淘宝购物车全选状态示例
- 使用jquery autocomplete实现类似搜索引擎的自动填充功能
- Python实现类似jQuery使用中的链式调用的示例
- SSH网上商城项目实战 过滤器实现购物车购物登陆功能的判断。
- 使用jQuery实现类似开关按钮的效果
- 类似购物车小红点的实现-BadgeView使用
- 使用jQuery实现类似开关按钮的效果
- 使用jquery实现购物车的添加与删除。
- 使用session技术来实现网上商城购物车的功能
- jQuery实现移动端手机商城购物车功能
- JavaWeb学习记录(十四)——商城购物之字符串拼接实现最近浏览商品和购物车的功能
- jQuery使用cookie与json简单实现购物车功能
- 使用jquery的autocomplete实现类似百度的输入提示
- 使用Python的Django框架结合jQuery实现AJAX购物车页面
- 使用session技术来实现网上商城购物车的功能
- 使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
- 使用Python的Django框架结合jQuery实现AJAX购物车页面