HTML代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="renderer"content="webkit"><title>A03号桌</title><linkrel="stylesheet"href="resources/css/main.css"></head><body><!--购物车--><divclass="shopCart"><!--可以在table外面套一个div写死宽高并设置overflow-y:scroll;，出现大量内容时，让table纵向滚动--><divclass="cartBox"><tableclass="cart"><thead><tr><th>菜品名称</th><th>数量</th><th>单价</th><th>价格</th></tr></thead><tbody><tr><td>大闸蟹</td><td><buttonclass="add">+</button><spanclass="count">1</span><buttonclass="reduce">-</button></td><td>￥<spanclass="price">68.00</span></td><td>￥<spanclass="sub_total">68.00</span></td></tr><tr><td>在天愿作比翼鸟</td><td><buttonclass="add">+</button><spanclass="count">1</span><buttonclass="reduce">-</button></td><td>￥<spanclass="price">68.00</span></td><td>￥<spanclass="sub_total">68.00</span></td></tr><tr><td>红嘴绿鹦哥</td><td><buttonclass="add">+</button><spanclass="count">1</span><buttonclass="reduce">-</button></td><td>￥<spanclass="price">68.00</span></td><td>￥<spanclass="sub_total">68.00</span></td></tr></tbody></table></div><ulclass="totalInfoclearfix"><li><spanclass="total">合计：<i>￥</i><b>242.00</b></span></li><li><buttonclass="btn-save">保存</button></li></ul></div><scriptsrc="resources/js/jquery-1.8.3.min.js"></script><scriptsrc="resources/js/shopCart.js"></script></body></html>


JS代码：

/****点击增加按钮****/$('.add').click(function(){//修改数量varn=$(this).next().html();varnum=parseInt(n)+1;$(this).next().html(num);//计算价格varc=$(this).parent().siblings().children('.price').html();parseInt(c);varsubPrice=num*c;varsub_price=subPrice.toFixed(2);//保留小数点后面两位小数$(this).parent().siblings().children('.sub_total').html(sub_price);//计算总价vartotal=0;$('.sub_total').each(function(){varprice=parseInt($(this).html());total+=price;vartotal_price=total.toFixed(2);$('.totalb').html(total_price);});});/****点击减少按钮****/$('.reduce').click(function(){//修改数量varn=$(this).prev().html();varnum=parseInt(n)-1;if(num==0){return;}//数量减到0就能再减了$(this).prev().html(num);//计算价格varc=$(this).parent().siblings().children('.price').html();parseInt(c);varsubPrice=num*c;subPrice.toFixed(2);varsub_price=subPrice.toFixed(2);$(this).parent().siblings().children('.sub_total').html(sub_price);//计算总价vartotal=0;$('.sub_total').each(function(){varprice=parseInt($(this).html());total+=price;vartotal_price=total.toFixed(2);$('.totalb').html(total_price);});});


考虑到篇幅问题，没有贴出CSS代码，最终页面截图如下：