0

我有一个由 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在项目被删除后自动计算变量而不刷新整个页面。

4

2 回答 2

2

更改此行

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

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

于 2013-07-24T05:53:14.217 回答
0

您可以按如下方式修改您的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
于 2013-07-24T06:12:14.223 回答