模拟购物车表格

<div id="arae">
  <table border="1" style="text-align: center">
 <thead>
 <th>商品编号</th>
 <th>商品名称</th>
 <th>商品数量</th>
 <th>商品单价</th>
 <th>商品总价</th>
 <th>操作</th>
 </thead>
 <tbody id="tbody">
 <tr>
 <td>1</td>
 <td>iphone4</td>
 <td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
 <td class="danJia">2000</td>
 <td><span class="price">0</span></td>
 <td><input type="button" value="删除" class="delete"></td>
 </tr>
 <tr>
 <td>2</td>
 <td>iphone4s</td>
 <td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
 <td>2200</td>
 <td><span class="price">0</span></td>
 <td><input type="button" value="删除" class="delete"></td>
 </tr>
 <tr>
 <td>3</td>
 <td>iphone5</td>
 <td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
 <td>2400</td>
 <td><span class="price">0</span></td>
 <td><input type="button" value="删除" class="delete"></td>
 </tr>
 <tr>
 <td>4</td>
 <td>iphone6</td>
 <td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td>
 <td>4000</td>
 <td><span class="price">0</span></td>
 <td><input type="button" value="删除" class="delete"></td> 
 </tr> 
 <tr> 
 <td>5</td> 
 <td>iphone7</td> 
 <td><input type="button" value=" + " class="ad"><span class="count">0</span><input type="button" value=" - " class="sb"></td> 
 <td>7000</td> 
 <td><span class="price">0</span></td> 
 <td><input type="button" value="删除" class="delete"></td> 
 </tr> 
 </tbody> 
 <tfoot> 
 <tr> 
 <td>商品总数</td> 
 <td><span class="allCount">0</span></td> 
 <td>商品总价</td> 
 <td><span class="allPrice">0</span></td> 
 <td><input type="button" value="清空购物车" class="allDelete"></td> 
 </tr> 
 </tfoot> 
</table>
</div>

#arae{
width: 550px;
  margin: 0 auto;
 float: left;
}
#arae span{
color: black;
 text-decoration: none;
}

$('#tbody').on('click','.delete',function(){
$(this).parent().parent().empty();
 showAllCount();
 showAllPrice();
});
$('.allDelete').on('click',function(){
$('#tbody').empty();
});
$('#tbody').on('click','.ad',function(){
var a = $(this).next('.count').text();
 a++;
 $(this).next('.count').text(a);
 var b = +$(this).parent().next('td').text();
 s = a*b;
 $(this).parent().next('td').next('td').children().text(s);
 showAllCount();
 showAllPrice();
}).on('click','.sb',function(){
var a = $(this).prev('.count').text();
 a--;
 $(this).prev('.count').text(a);
 var b = +$(this).parent().next('td').text();
 s = a*b;
 $(this).parent().next('td').next('td').children().text(s);
 showAllCount();
 showAllPrice();
});
function showAllCount(){
var allSum = 0;
 $('.count').each(function(){
 allSum = allSum + (+$(this).text());
 $('.allCount').text(allSum);
 });
}
function showAllPrice(){
var allSum = 0;
 $('.price').each(function(){
 allSum = allSum + (+$(this).text());
 $('.allPrice').text(allSum);
 });
}

转载于:https://www.cnblogs.com/xingxing88/p/6060170.html