提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
js+jquery
所需函数：
function cal（）：计算购物车里的价格，积分，数量等；
$(".add").click(function(){})：添加商品数量；
$(".sub").click(function(){})：减少商品数量；
$("#add").click(function(){})：添加新商品；
$(".del").click(function(){})：删除商品；
$("#control").click(function(){})：商品全选；
<script>
function cal(){
//设置三个全局变量来接受总数量，总积分，总价格
var allnum = 0;
var allsorce = 0;
var allprice = 0;
//通过类选择器拿到每一个商品数量框
$(".num").each(function(i,v){
var num = $(v).val();
var price = $(v).parent().prev().html();
var all = parseInt(num)*parseInt(price);
$(v).parent().next().html(all);
allnum+=parseInt(num);
allprice+=parseInt(all)
var jf = $(v).parent().prev().prev().html();
var alljf = parseInt(num)*parseInt(jf);
allsorce+=parseInt(alljf);
$("#allnum").html(allnum);
$("#alljf").html(allsorce);
$("#allmoney").html(allprice);
});
}
$(function(){
cal();
$(".add").click(function(){
var n = $(this).prev().val();
$(this).prev().val(parseInt(n)+1);
cal();
});
$(".sub").click(function(){
var n = $(this).next().val();
if(n>1){
$$(this).next().val(parseInt(n)-1);
cal();
}else{
var bet = confirm("要删除吗？")
if(bet){
$(this).parents("tr").remove();
cal();
}
}
});
$("#add").click(function(){
var $newNode=$("table tr:eq(2)").clone(true);
$("table tr:last").before($newNode);
cal();
});
$(".del").click(function(){
var bet = confirm("要删除吗？")
if(bet){
$(this).parents("tr").remove();
cal();
}
});
var flag = $("#control").val();
$("#control").click(function(){
if(flag){
$("input[type='checkbox']").attr("checked","true");
flag=false;
}else{
$("input[type='checkbox']").removeAttr("checked");
flag=true;
}
});
});
</script>
html+css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
table{
width: 800px;
margin: 0px auto;
font-size: 12px;
text-align: center;
}
td{
padding: 10px;
background-color: #E2F2FF;
}
.td_2 div{
float: left;
}
.td_2 div:last-of-type{
width: 260px;
margin-left:5px;
}
.td_2 p{
line-height: 20px;
text-align: left;
}
.num{
border: 1px solid powderblue;
width: 20px;
height: 20px;
text-align: center;
}
.sub,.add{
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<input type="button" οnclick="cal();" value="aa"/>
<table>
<tr>
<td><input type="checkbox" id="control"/>全选</td>
<td>店铺宝贝</td><td>获积分</td><td>单价(元)</td>
<td>数量</td><td>小计(元)</td><td>操作 <input type="button" id="add" value="添加"/></td>
</tr>
<tr id="pro1">
<td class="td_1"><input type="checkbox" /></td>
<td class="td_2">
<div><img src="images/taobao_cart_01.jpg"></div>
<div>
<p><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></p>
<p>颜色：棕色 尺码：37</p>
<p>保障:<img src="images/taobao_icon_01.jpg"> </p>
</div>
</td>
<td class="td_3">5</td>
<td class="td_4">138</td>
<td class="td_5">
<input type="button" value="-" class="sub"/>
<input type="text" value="1" class="num" />
<input type="button" value="+" class="add"/>
</td>
<td class="td_6">
</td>
<td class="td_7">
<a href="#" class="del">删除</a>
</td>
</tr>
<tr id="pro2">
<td class="td_1"><input type="checkbox" /></td>
<td class="td_2">
<div><img src="images/taobao_cart_02.jpg"></div>
<div>
<p><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a></p>
<p>保障:<img src="images/taobao_icon_01.jpg"> </p>
</div>
</td>
<td class="td_3">12</td>
<td class="td_4">265</td>
<td class="td_5">
<input type="button" value="-" class="sub"/>
<input type="text" value="1" class="num" />
<input type="button" value="+" class="add"/>
</td>
<td class="td_6">
</td>
<td class="td_7">
<a href="#" class="del">删除</a>
</td>
</tr>
<tr id="pro3">
<td class="td_1"><input type="checkbox" /></td>
<td class="td_2">
<div><img src="images/taobao_cart_03.jpg"></div>
<div>
<p><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a></p>
<p>保障:<img src="images/taobao_icon_01.jpg">
<img src="images/taobao_icon_02.jpg"></p>
</div>
</td>
<td class="td_3">3</td>
<td class="td_4">85</td>
<td class="td_5">
<input type="button" value="-" class="sub"/>
<input type="text" value="2" class="num" />
<input type="button" value="+" class="add"/>
</td>
<td class="td_6">
</td>
<td class="td_7">
<a href="#" class="del">删除</a>
</td>
</tr>
<tr id="pro4">
<td class="td_1"><input type="checkbox" /></td>
<td class="td_2">
<div><img src="images/taobao_cart_04.jpg"></div>
<div>
<p><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></p>
<p>保障:<img src="images/taobao_icon_01.jpg">
<img src="images/taobao_icon_02.jpg"></p>
</div>
</td>
<td class="td_3">12</td>
<td class="td_4">12</td>
<td class="td_5">
<input type="button" value="-" class="sub"/>
<input type="text" value="5" class="num" />
<input type="button" value="+" class="add"/>
</td>
<td class="td_6">
</td>
<td class="td_7">
<a href="#" class="del">删除</a>
</td>
</tr>
<tr id="all">
<td colspan="7">
总数量:<span id="allnum"></span>
总积分:<span id="alljf"></span>
总金额:<span id="allmoney"></span>
</td>
</tr>
</table>
</body>
</html>
效果图：