首页
所有分类
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 相关文章推荐
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
使用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
对齐打印(1) 图像处理(1) 底部导航(1) 模型保存加载(1) PyTorch(1) 井字棋(1) 五子棋(12) format(1) 计算器(5) 人工智能(2)
You might like
一个oracle+PHP的查询的例子
2006/10/09 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php图像处理类实例
2015/07/28 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
解决Yii2邮件发送结果返回成功，但接收不到邮件的问题
2017/05/23 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
使用JS进行目录上传（相当于批量上传）
2010/12/05 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
老生常谈js-react组件生命周期
2017/05/02 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python实现最短路径的实例方法
2020/07/19 Python
Farnell德国：电子元器件供应商
2018/07/10 全球购物
宝拉珍选英国官网：Paula’s Choice英国
2019/05/29 全球购物
同学聚会主持词
2014/03/18 职场文书
商业项目策划方案
2014/06/05 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
老公保证书怎么写
2015/02/26 职场文书
2015年征兵工作总结
2015/07/23 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python