參考以下代碼：
註意需要導入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)轉換為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);?
//在添加之前確定該商品在購物車中是否存在,若存在,則數量+1,若不存在則創建行?
var?$trs?=?$("#goods>tr");?
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);//數量+1?
//金額從新計算?
$gtds.eq(3).html(price*num);?
return;//後面代碼不再執行?
}?}?
//若不存在,創建後追加?
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"按鈕是找到相關商品所在td,以jQuery對象返回? function?findStock(btn){?var?name?=?$(btn).parent().siblings().eq(0).html();//獲取商品名字?
//註意table默認有行分組,若此處使用?$("#table1>tr:gt(0)")則找不到任何tr?
var?$trs?=?$("#table1>tbody>tr: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);?
//購物車數據改變?
var?$td?=?$(btn).prev();?
var?num?=?parseInt($td.val());//number?
//num此時為number類型(在計算時會自動轉換為number類型)?
$td.val(++num);?
//獲取單價,再加計算前要先轉換為number類型?
var?price?=?parseInt($(btn).parent().prev().html());?
$(btn).parent().next().html(num*price);?
//總計功能?
total();?
}? //減少"-"功能? function?decrease(btn){?//該商品數量=1時候不能再減少?
var?num?=?parseInt($(btn).next().val());?
if(num?<=?1){?
return;?}?
var?$stock?=?findStock(btn);?
//庫存+1?
var?stock?=?$stock.html();?
$stock.html(++stock);?
//商品數量-1?
$(btn).next().val(--num);?
//從新計算金額?
var?price?=?parseInt($(btn).parent().prev().html());?
$(btn).parent().next().html(price*num);?
//總計功能?
total();?
}? //"x"刪除按鈕功能? function?del(btn){?//將商品數量歸還庫存?
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鼠標</td>?
<td>80</td>?
<td>黑色</td>?
<td>5</td>?
<td>98%</td>?
<td?align="center">?
<input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/>?</td>?
</tr>? <tr>?<td>微軟X470鍵盤</td>?
<td>150</td>?
<td>黑色</td>?
<td>9028</td>?
<td>96%</td>?
<td?align="center">?
<input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/>?</td>?
</tr>? <tr>?<td>洛克iphone6手機殼</td>?
<td>60</td>?
<td>透明</td>?
<td>672</td>?
<td>99%</td>?
<td?align="center">?
<input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/>?</td>?
</tr>? <tr>?<td>藍牙耳機</td>?
<td>100</td>?
<td>藍色</td>?
<td>8937</td>?
<td>95%</td>?
<td?align="center">?
<input?type="button"?value="加入購物車"?onclick="add_shoppingcart(this);"/>?</td>?
</tr>? <tr>?<td>金士頓U盤</td>?
<td>70</td>?
<td>紅色</td>?
<td>482</td>?
<td>100%</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>數量</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>
最終效果圖: