首页
所有分类
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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
原生js实现分页效果
Sep 23 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
dockerfile(1) commit(1) reduce(2) SQLite3(1) pytz(1) Tablespace(1) GoFrame(3) harbor(1) 分布式锁(3) 短信验证码(1)
You might like
php 操作符与控制结构
2012/03/07 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
关于Python-faker的函数效果一览
2019/11/28 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
PyCharm安装PyQt5及其工具（Qt Designer、PyUIC、PyRcc）的步骤详解
2020/11/02 Python
五种Python转义表示法
2020/11/27 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
英国的屈臣氏：Boots博姿
2017/12/23 全球购物
德国最大的婴儿用品网上商店：Kidsroom.de（支持中文）
2020/09/02 全球购物
NET程序员上机面试题
2015/05/23 面试题
专业实习自我鉴定
2013/10/29 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android