模拟购物车表格

<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);
  });
}

模拟购物车表格

原文：http://www.cnblogs.com/xingxing88/p/6060170.html