首页
所有分类
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 相关文章推荐
javascript 打印页面代码
Mar 24 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
详解vuex的简单使用
Mar 12 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
js实现漂亮的星空背景
Nov 01 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
贪吃蛇(2) SnakeGame(1) while(1) okenizer(1) mediapipe(1) for(1) 计算机视觉(2) cvzone(1) 分词器(1) 无限迭代(1)
You might like
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
python实现百万答题自动百度搜索答案
2018/01/16 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
elf彩妆英国官网：e.l.f. Cosmetics英国（美国平价彩妆品牌）
2017/11/02 全球购物
西班牙土拨鼠床垫公司，感觉在云端：Marmota
2019/03/18 全球购物
店长岗位职责
2013/11/21 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
市场部管理制度
2014/02/02 职场文书
新闻人物通讯稿
2014/10/09 职场文书
致运动员赞词
2015/07/22 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript