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代码,最终页面截图如下:
转载于:https://blog.51cto.com/dapengtalk/1863852