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>';

ユーザーが画像をクリックして 1 つのアイテムを削除すると、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 に答える