HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>A03号桌</title>
<link rel="stylesheet" href="resources/css/main.css">
</head>
<body>
<!--购物车-->
<div class="shopCart">
<!--可以在table外面套一个div写死宽高并设置overflow-y:scroll;，出现大量内容时，让table纵向滚动-->
<div class="cartBox">
<table class="cart">
<thead>
<tr>
<th>菜品名称</th>
<th>数量</th>
<th>单价</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>大闸蟹</td>
<td>
<button class="add">+</button>
<span class="count">1</span>
<button class="reduce">-</button>
</td>
<td>
￥<span class="price">68.00</span>
</td>
<td>
￥<span class="sub_total">68.00</span>
</td>
</tr>
<tr>
<td>在天愿作比翼鸟</td>
<td>
<button class="add">+</button>
<span class="count">1</span>
<button class="reduce">-</button>
</td>
<td>
￥<span class="price">68.00</span>
</td>
<td>
￥<span class="sub_total">68.00</span>
</td>
</tr>
<tr>
<td>红嘴绿鹦哥</td>
<td>
<button class="add">+</button>
<span class="count">1</span>
<button class="reduce">-</button>
</td>
<td>
￥<span class="price">68.00</span>
</td>
<td>
￥<span class="sub_total">68.00</span>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="totalInfo clearfix">
<li>
<span class="total">
合计：<i>￥</i><b>242.00</b>
</span>
</li>
<li>
<button class="btn-save">保存</button>
</li>
</ul>
</div>
<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/shopCart.js"></script>
</body>
</html>
JS代码：
/****点击增加按钮****/
$('.add').click(function(){
//修改数量
var n=$(this).next().html();
var num=parseInt(n)+1;
$(this).next().html(num);
//计算价格
var c= $(this).parent().siblings().children('.price').html();
parseInt(c);
var subPrice = num * c;
var sub_price = subPrice.toFixed(2); //保留小数点后面两位小数
$(this).parent().siblings().children('.sub_total').html(sub_price);
//计算总价
var total=0;
$('.sub_total').each(function(){
var price=parseInt($(this).html());
total+=price;
var total_price = total.toFixed(2);
$('.total b').html(total_price);
});
});
/****点击减少按钮****/
$('.reduce').click(function(){
//修改数量
var n=$(this).prev().html();
var num=parseInt(n)-1;
if(num==0){return;}//数量减到0就能再减了
$(this).prev().html(num);
//计算价格
var c= $(this).parent().siblings().children('.price').html();
parseInt(c);
var subPrice = num * c;
subPrice.toFixed(2);
var sub_price = subPrice.toFixed(2);
$(this).parent().siblings().children('.sub_total').html(sub_price);
//计算总价
var total=0;
$('.sub_total').each(function(){
var price=parseInt($(this).html());
total+=price;
var total_price = total.toFixed(2);
$('.total b').html(total_price);
});
});
考虑到篇幅问题，没有贴出CSS代码，最终页面截图如下：
