首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于JQuery实现的类似购物商城的购物车

Posted in Javascript onDecember 06, 2011

商品信息使用JSON数据来模拟

同一个产品点击多次，不会重复添加，而是在已有的基础上数量+1，

商品数量也可以手动输入，当输入0时，该商品将自动从购物车删除（点击减号到小于1时，也会提示是否从购物车删除商品信息）

每个产品的价格和总价都会根据添加和删除的操作来动态计算

附下载链接：/201112/yuanma/jquery_gouwuche.rar

基本的功能都已经实现， 建议使用IE浏览器运行，其他浏览器没有测试
基于JQuery实现的类似购物商城的购物车
HTML代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
</head> 
<body> 
<h2 style="text-align:left">商品列表</h2> 
<table width="800" border="0" id="tblProduct" cellpadding="1" cellspacing="1" bgcolor="black"> 
<tr id="trMaster" bgcolor="white" style="display:none"> 
<td> 
编号:<span>000001</span><br /> 
名称：<span>aa</span><br /> 
价格：<span>2.5</span><br /> 
描述：<span>aaaaa</span><br /> 
<div style="text-align:right"><input type="button" name="btnBuy" value="buy" /></div> 
</td> 
<td> 
编号:<span>000001</span><br /> 
名称：<span>aa</span><br /> 
价格：<span>2.5</span><br /> 
描述：<span>aaaaa</span><br /> 
<div style="text-align:right"><input type="button" name="btnBuy" value="buy" /></div> 
</td> 
<td> 
编号:<span>000001</span><br /> 
名称：<span>aa</span><br /> 
价格：<span>2.5</span><br /> 
描述：<span>aaaaa</span><br /> 
<div style="text-align:right"><input type="button" name="btnBuy" value="buy" /></div> 
</td> 
<td> 
编号:<span>000001</span><br /> 
名称：<span>aa</span><br /> 
价格：<span>2.5</span><br /> 
描述：<span>aaaaa</span><br /> 
<div style="text-align:right"><input type="button" name="btnBuy" value="buy" /></div> 
</td> 
</tr> 
</table> 
<h2 style="text-align:left">购物车</h2> 
<table width="800" border="0" id="tblOrder" cellpadding="1" cellspacing="1" bgcolor="black"> 
<tr bgcolor="white"><td>序号</td><td>编号</td><td>名称</td><td>描述</td><td>数量</td><td>单价</td><td>总价</td><td>删除</td></tr> 
<tr id="orderMarter" bgcolor="white" style="display:none"> 
<td style=" width:5%">1</td> 
<td style=" width:10%">000001</td> 
<td style=" width:10%">aa</td> 
<td>aaaaa</td> 
<td style=" width:15%"> 
<input type="text" name="txtNum" style="width:50px;" value="0" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/> 
<input type="button" name='btnAdd' style="width:15px; text-align:center" value="+" /> 
<input type="button" name='btnCut' style="width:15px; text-align:center" value="-" /> 
</td> 
<td style=" width:10%">0</td> 
<td style=" width:10%"><font color="red">0</font></td> 
<td style=" width:5%; text-align:center"><input type="button" name='btnRemove' style="width:30px; text-align:center" value="X" /></td> 
</tr> 
</table> 
<table width="800" border="0" id="tblTotal" cellpadding="1" cellspacing="1" bgcolor="black"> 
<tr bgcolor="white" align="right"> 
<td>总价</td> 
<td id="tdTotal"><font color="#FF0000" size="+1" face="Arial, Helvetica, sans-serif">0.0</font></td> 
</tr> 
</table> 
</body>

JS 代码 
<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",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("<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('确定要删除该商品吗?')){ 
$(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('确定要删除该商品吗?')){ 
$(tr).remove(); 
$("#tdTotal").html("<font color='#FF0000' size='+1' face='Arial, Helvetica, sans-serif'>"+GetTotalPrice().toFixed(2)+"</font>"); 
} 
}); 
}); 
</script>

基于JQuery实现的类似购物商城的购物车

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Knockout数组(observable)使用详解示例
Nov 15 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 #Javascript
js Function类型
Dec 04 #Javascript
Javascript base64编码实现代码
Dec 02 #Javascript
JS获取页面窗口大小的代码解读
Dec 01 #Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 #Javascript
jQuery 中使用JSON的实现代码
Dec 01 #Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 #Javascript
YB235(1) 再生机(1) 森海(1) 1 Tube Radio(1) MX500(1) S2000(3) 东方红(1) YB400(2) 直流胆(1) YB217(1)
You might like
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
window.onload 加载完毕的问题及解决方案（上）
2009/07/09 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
DOM 事件的深入浅出（二）
2016/12/05 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Django csrf 验证问题的实现
2018/10/09 Python
学习python分支结构
2019/05/17 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
python剪切视频与合并视频的实现
2020/03/03 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
Guess美国官网：美国知名服装品牌
2019/04/08 全球购物
Auguste The Label官网：澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
安全生产知识竞赛活动总结
2014/07/07 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
老公保证书
2015/01/17 职场文书
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技