在jQuery中删除一个项目后，计算一个动态表的总和 - Calculate the sum of one dynamic table after remove one item in jQuery

Calculate the sum of one dynamic table after remove one item in jQuery

我有一个由PHP代码生成的动态表：

   $grand_total=0;
   $sql1=mysql_query("SELECT * FROM cart")
   while($row=mysql_fetch_array($sql1)){
      $id=$row['id'];
      $unit_price=$row['unit_price'];
      $qty=$row['qty'];
      $total_price=$unit_price*$qty;
      $grand_total=$grand_total+$total_price;
      $output .='<tr id="$id">';
      $output .='<td>'.$unit_price.'</td>';
      $output .='<td>'.$qty.'</td>';
      $output .='<td>'.$total_price.'</td>';
      $output .='<td align="center"><img class="delete" src="images/Erase.png" alt="" width="16" height="16" rel="'.$total_price.'" /></td>';
      $output .='</tr>';
   }
   $output .='<tr>';
   $output .='<td colspan="2"> TOTAL </td>';
   $output .='<td>'.$grand_total.'</td'>;
   $output .='</tr>';

当用户点击图像删除一项时，它调用jQuery函数：

<script>
$(document).ready(function(){   
    $('#table2 td img.delete').click(function(){
        if (confirm("Do you want to delete this item?")) {
          var parent = $(this).closest('TR');
          var id = parent.attr('id');
          $.ajax({
            type: "POST",
            data: "id=" +id,
            url: "packages_cart_delete.php"
          });
    $(this).parent().parent().remove();
    alert("Item has been deleted!");
}
return false;
    });
});
</script>

HTML输出：

<table id="table2" width="100%" border="0" cellspacing="3" cellspadding="3">
   <tr>
      <th>Unit Price</th>
      <th>Qty</th>
      <th>Total Price</th>
      <th>Delete</th>
  </tr>
  <?php echo $output; ?>
</table>

它运行得很好。唯一缺少的也是我无法理解的是，如何在项目被擦除后自动计算$grand_total变量，而不刷新整个页面。

更改此行

      $output .='<td>'.$total_price.'</td>';

至

      $output .='<td class="total-price">'.$total_price.'</td>';

并更改

   $output .='<td>'.$grand_total.'</td'>;

至

   $output .='<td class="grand-total">'.$grand_total.'</td'>;

并在删除成功后调用以下函数：

function calculateTotal() {
    var grandTotal = 0;
    $(".total-price").each( function() {
        var thisPrice = parseInt( $(this).text() );
        grandTotal += thisPrice;
    });
    $(".grand-total").text( grandTotal );
}

我还没有测试过，但应该可以。

您可以按如下方式修改您的js：

$(document).ready(function(){   
    $('#table2 td img.delete').click(function(){
        if (confirm("Do you want to delete this item?")) {
          var parent = $(this).closest('TR');
          var id = parent.attr('id');
          $.ajax({
            type: "POST",
            data: "id=" +id,
            url: "packages_cart_delete.php"
          });
          var ttlprice = parseInt( $(this).attr("rel"), 10 ); // item price
          var $grand = $("#table2 > tr:last-child > td:last-child"); // grand total
          $grand.text( parseInt( $grand.text(), 10 ) - ttlprice ); // subtracted
          $(this).parent().parent().remove();
          alert("Item has been deleted!");
        }
        return false;
    });
});

你可以简单地用cyber_rookie的建议将类添加到你的表中，特别是

$output .='<td class="grand-total">'.$grand_total.'</td'>;

这将使它成为

var ttlprice = parseInt( $(this).attr("rel"), 10 ); // item price
var $grand = $('.grand-total'); // grand total
$grand.text( parseInt( $grand.text(), 10 ) - ttlprice ); // subtracted