使用JQuery 实现类似购物商城的购物车
使用JQuery& Clone 模板来实现商品信息的展示，展现形式可以通过修改模板中的td来确定每一行显示多少个商品信息
商品信息使用JSON数据来模拟
同一个产品点击多次，不会重复添加，而是在已有的基础上数量+1，
商品数量也可以手动输入，当输入0时，该商品将自动从购物车删除（点击减号到小于1时，也会提示是否从购物车删除商品信息）
每个产品的价格和总价都会根据添加和删除的操作来动态计算
附下载链接：
基本的功能都已经实现， 建议使用IE6，7，8，运行，其他浏览器没有测试
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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&无标题文档&/title&
&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&&
&&& 编号:&span&000001&/span&&br /&
&&& 名称：&span&aa&/span&&br /&
&&& 价格：&span&2.5&/span&&br /&
&&& 描述：&span&aaaaa&/span&&br /&
&& &p style=&text-align:right&&&input type=&button& name=&btnBuy& value=&buy& /&&/p&
&&& &td&&&
&&& 编号:&span&000001&/span&&br /&
&&& 名称：&span&aa&/span&&br /&
&&& 价格：&span&2.5&/span&&br /&
&&& 描述：&span&aaaaa&/span&&br /&
&& &p style=&text-align:right&&&input type=&button& name=&btnBuy& value=&buy& /&&/p&&&
&&&& &td&&
&&& 编号:&span&000001&/span&&br /&&
&&& 名称：&span&aa&/span&&br /&
&&& 价格：&span&2.5&/span&&br /&
&&& 描述：&span&aaaaa&/span&&br /&
&& &p style=&text-align:right&&&input type=&button& name=&btnBuy& value=&buy& /&&/p&&&
&&& 编号:&span&000001&/span&&br /&&
&&& 名称：&span&aa&/span&&br /&
&&& 价格：&span&2.5&/span&&br /&
&&& 描述：&span&aaaaa&/span&&br /&&&&
&& &p style=&text-align:right&&&input type=&button& name=&btnBuy& value=&buy& /&&/p&&&
&&& &/td&&&
&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:50& 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:15 text-align:center& value=&+& /&
&&& &input type=&button& name='btnCut' style=&width:15 text-align:center& value=&-& /&
&&& &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:30 text-align:center& value=&X& /&&/td&
&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&
& 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 type=&text/javascript&&
var j=0,i=-1,k=-1,len=$(&#trMaster td&).size();//数据和模板的td 都可以自定义，格式正确即可
$.each(product,function(index,prod){
&&& 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;
$(&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+=
&&& return totalN
$(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*
&&&&&&&&&&& $(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&&);
&&& $(&#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)
&&& $(&#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&&);
&&摘自 晓风拂月拒绝访问 | www.jq22.com | 百度云加速
请打开cookies.
此网站 (www.jq22.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(c343d1-ua98).
重新安装浏览器，或使用别的浏览器购物车的jquery插件怎么写_百度知道
购物车的jquery插件怎么写
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
少时离家老大规知道合伙人
来自电脑网络类芝麻团
少时离家老大规
采纳数：716
获赞数：1434
参与团队：
jQuery(function($) { $(&#add&).on(&click&, function() { var boxs = $(&:checkbox[name='haitai']:checked&); if (!boxs.length) { alert(&请选择商品！&); } else { var bao = &&; boxs.each(function(i, dom) { bao += $(dom).attr(&value&...
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。00:58 提问
jQuery+cookies写的购物车怎么获取值再下订单给数据库插入？
| ----------------------------------------------------------------------------------
| Shopping cart - Fetch Cookie data and display cart items购物车-获取Cookie数据并显示购物车条目
| ----------------------------------------------------------------------------------
function output_cookie()
var cookie = $.cookie('cart'); /*获取cookie*/
if ( cookie === undefined )
cookie = $.parseJSON(cookie);
for ( var x in cookie )
temp = cookie[x].
temp = temp.replace( /^\D+/g, '');/*\d表示数字, + 表示一个或多个，就是把连续的多个数字替换为空*/
temp = parseFloat(temp).toFixed(2);/*parseFloat(1.2222).toFixed(2);
///1.22 */
var $new = $('&tr& \
&a class="entry-thumbnail" href="' + cookie[x].thumbnail + '" data-toggle="lightbox"&\
&img src="' + cookie[x].thumbnail + '" alt="' + cookie[x].title + '" /& \
&a class="entry-title" href="' + cookie[x].url + '"&' + cookie[x].title + '&/a& \
&td&&span class="unit-price"&' + cookie[x].price + '&/span&&/td& \
&div class="qty-btn-group"& \
&button type="button" class="down"&&i class="iconfont-caret-down inline-middle"&&/i&&/button& \
&input type="text" value="' + cookie[x].qty + '" /& \
&button type="button" class="up"&&i class="iconfont-caret-up inline-middle"&&/i&&/button& \
&td class="hidden-xs"&&strong class="text-bold row-total"&￥' + temp + '&/strong&&/td& \
&td class="hidden-xs"&&button type="button" class="close" aria-hidden="true"&×&/button&&/td& \
$new.appendTo( $('.tbl-cart tbody') );
$new.find('[data-toggle="lightbox"]').magnificPopup({
type: 'image'
update_cart_total();
output_cookie();
这是在jQuery文件里面，但是我要怎么获取这里面每个cookies的值，然后插入数据库？大神求解！！在线等
按赞数排序
看json字符串结构，然后服务器建立json对应的类模型，反序列化为类就可以读取入库了。自己找你使用的服务器端语言如何反序列化json字符串为对象就行了
var cookie = $.cookie('cart'); /*获取cookie*/
if ( cookie === undefined )
alert(cookie)///////////////////////
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐拒绝访问 | www.jq22.com | 百度云加速
请打开cookies.
此网站 (www.jq22.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(bc436a-ua98).
重新安装浏览器，或使用别的浏览器}