script
創(chuàng)新互聯(lián)成立于2013年，我們提供高端成都網(wǎng)站建設(shè)、成都網(wǎng)站制作公司、成都網(wǎng)站設(shè)計、網(wǎng)站定制、營銷型網(wǎng)站、小程序制作、微信公眾號開發(fā)、seo優(yōu)化服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項目落地，為成都格柵板企業(yè)提供源源不斷的流量和訂單咨詢。
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")?+?"\n";
});
localStorage.car?=?localStorage.car???bao?+?localStorage.car?:?bao;
alert("成功加入購物車！");
}
});
});
/script
兩種辦法，一種是存到cookie，一種是存到數(shù)據(jù)庫。淘寶的購物車，是存到數(shù)據(jù)庫的。
參考以下代碼：
注意需要導(dǎo)入jquery.js.
!DOCTYPE?html??
html??
head??
title購物車----jQuery/title??
meta?charset="utf-8"?/??
style?type="text/css"??
h1?{??
text-align:center;??
}??
table?{??
margin:0?auto;??
width:60%;??
border:2px?solid?#aaa;??
border-collapse:collapse;??
}??
table?th,?table?td?{??
border:2px?solid?#aaa;??
padding:5px;??
}??
th?{??
background-color:#eee;??
}??
/style??
script?type="text/javascript"?src="./js/jquery.js"/script??
script?type="text/javascript"??
function?add_shoppingcart(btn){//將btn(dom)轉(zhuǎn)換為jQuery對象??
//先獲取商品名字和單價還有庫存以備后面使用??
var?$tds?=?$(btn).parent().siblings();??
//$tds.eq(0)是jQuery對象??$tds[0]是DOM對象??
var?name?=?$tds.eq(0).html();//string??
var?price?=?$tds.eq(1).html();//string??
var?stock?=?$tds.eq(3).html();//string??
//查看庫存是否還有=0??
if(stock?=?0){??
return;?????
}??
//無論購物車中是否有該商品,庫存都要-1??
$tds.eq(3).html(--stock);??
//在添加之前確定該商品在購物車中是否存在,若存在,則數(shù)量+1,若不存在則創(chuàng)建行??
var?$trs?=?$("#goodstr");??
for(var?i=0;i$trs.length;i++){??
var?$gtds?=?$trs.eq(i).children();??
var?gName?=?$gtds.eq(0).html();??
if(name?==?gName){//若存在??
var?num?=?parseInt($gtds.eq(2).children().eq(1).val());??
$gtds.eq(2).children().eq(1).val(++num);//數(shù)量+1??
//金額從新計算??
$gtds.eq(3).html(price*num);??
return;//后面代碼不再執(zhí)行??
}??
}??
//若不存在,創(chuàng)建后追加??
var?li?=??
"tr"+??
"td"+name+"/td"+??
"td"+price+"/td"+??
"td?align='center'"+??
"input?type='button'?value='-'?onclick='decrease(this);'/?"+??
"input?type='text'?size='3'?readonly?value='1'/?"+??
"input?type='button'?value='+'?onclick='increase(this);'/"+??
"/td"+??
"td"+price+"/td"+??
"td?align='center'"+??
"input?type='button'?value='x'?onclick='del(this);'/"+??
"/td"+??
"/tr";??
//追加到#goods后面??
$("#goods").append($(li));??
//總計功能??
total();??
}??
//輔助方法--單擊購物車中的"+"??"-"??"x"按鈕是找到相關(guān)商品所在td,以jQuery對象返回??
function?findStock(btn){??
var?name?=?$(btn).parent().siblings().eq(0).html();//獲取商品名字??
//注意table默認(rèn)有行分組,若此處使用?$("#table1tr:gt(0)")則找不到任何tr??
var?$trs?=?$("#table1tbodytr:gt(0)");??
for(var?i=0;i$trs.length;i++){??
var?fName?=?$trs.eq(i).children().eq(0).html();??
if(name?==?fName){//找到匹配的商品??
return?$trs.eq(i).children().eq(3);??
}??
}??
}??
//增加"+"功能??
function?increase(btn){??
//獲取該商品庫存看是否=0??
var?$stock?=?findStock(btn);??
var?stock?=?$stock.html();??
if(stock?=?0){??
return;??
}??
//庫存-1????
$stock.html(--stock);??
//購物車數(shù)據(jù)改變??
var?$td?=?$(btn).prev();??
var?num?=?parseInt($td.val());//number??
//num此時為number類型(在計算時會自動轉(zhuǎn)換為number類型)??
$td.val(++num);??
//獲取單價,再加計算前要先轉(zhuǎn)換為number類型??
var?price?=?parseInt($(btn).parent().prev().html());??
$(btn).parent().next().html(num*price);??
//總計功能??
total();??
}??
//減少"-"功能??
function?decrease(btn){??
//該商品數(shù)量=1時候不能再減少??
var?num?=?parseInt($(btn).next().val());??
if(num?=?1){??
return;?????
}??
var?$stock?=?findStock(btn);??
//庫存+1??
var?stock?=?$stock.html();??
$stock.html(++stock);??
//商品數(shù)量-1??
$(btn).next().val(--num);??
//從新計算金額??
var?price?=?parseInt($(btn).parent().prev().html());??
$(btn).parent().next().html(price*num);??
//總計功能??
total();??
}??
//"x"刪除按鈕功能??
function?del(btn){??
//將商品數(shù)量歸還庫存??
var?$stock?=?findStock(btn);??
var?stock?=?parseInt($stock.html());??
var?num?=?parseInt($(btn).parent().prev().prev().children().eq(1).val());??
$stock.html(num?+?stock);??
//清空改行商品列表??
$(btn).parent().parent().remove();??
//總計功能??
total();??
}??
//總計功能??
function?total(){??
//獲取所有購物車中的trs??
var?$trs?=?$("#goods?tr");??
var?amount?=?0;??
for(var?i=0;i$trs.length;i++){??
var?money?=?parseInt($trs.eq(i).children().eq(3).html());??
amount?+=?money;??
}??
//寫入總計欄??
$("#total").html(amount);??
}??
/script??
/head??
body??
h1真劃算/h1??
table?id="table1"??
tr??
th商品/th??
th單價(元)/th??
th顏色/th??
th庫存/th??
th好評率/th??
th操作/th??
/tr?????
tr??
td羅技M185鼠標(biāo)/td??
td80/td??
td黑色/td??
td5/td??
td98%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
tr??
td微軟X470鍵盤/td??
td150/td??
td黑色/td??
td9028/td??
td96%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
tr??
td洛克iphone6手機(jī)殼/td??
td60/td??
td透明/td??
td672/td??
td99%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
tr??
td藍(lán)牙耳機(jī)/td??
td100/td??
td藍(lán)色/td??
td8937/td??
td95%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
tr??
td金士頓U盤/td??
td70/td??
td紅色/td??
td482/td??
td100%/td??
td?align="center"??
input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/??
/td??
/tr??
/table??
h1購物車/h1??
table??
thead??
tr??
th商品/th??
th單價(元)/th??
th數(shù)量/th??
th金額(元)/th??
th刪除/th??
/tr??
/thead??
tbody?id="goods"??
/tbody??
tfoot??
tr??
td?colspan="3"?align="right"總計/td??
td?id="total"/td??
td/td??
/tr??
/tfoot??
/table??????
/body??
/html
最終效果圖:
重慶分公司
重慶分公司
