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