JQuery：如何在表格中對每行進行總計價格

Question

所以我想用JQuery來總結每一行。 但我的代碼只能用於一行。

當我將新項目放入新行時，JQuery不起作用。

這是我的HTML：

<table class="table cart"> 
     <thead> 
      <tr> 
       <th class="cart-product-remove">&nbsp;</th> 
       <th class="cart-product-thumbnail">&nbsp;</th> 
       <th class="cart-product-name">Product</th> 
       <th class="cart-product-price">Unit Price</th> 
       <th class="cart-product-quantity">Quantity</th> 
       <th class="cart-product-subtotal">Total</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr class="cart_item"> 
       <td class="cart-product-remove"> 
        <a href="#" class="remove" title="Remove this item"><i class="icon-trash2"></i></a> 
       </td> 

       <td class="cart-product-thumbnail"> 
        <a href="#"><img width="64" height="64" src="images/shop/thumbs/small/dress-3.jpg" alt="Pink Printed Dress"></a> 
       </td> 

       <td class="cart-product-name"> 
        <a href="#">Pink Printed Dress</a> 
       </td> 

       <td class="cart-product-price"> 
        Rp <span id="price" class="amount">50000</span> 
       </td> 

       <td class="cart-product-quantity"> 
        <div class="quantity clearfix"> 
         <input type="button" value="-" class="minus" field="quantity"> 
         <input type="text" id="quantity" name="quantity" value="1" class="qty" /> 
         <input type="button" value="+" class="plus" field="quantity"> 
        </div> 
       </td> 

       <td class="cart-product-subtotal"> 
        <span id="total" class="amount"></span> 
       </td> 
      </tr> 
    </tbody> 
</table> 

這是我的jQuery代碼：

<script type="text/javascript"> 

     function calculate(){ 
      var price = parseFloat($('#price').text()) || 0; 
      var quantity = parseInt($('#quantity').val()); 
      var total = price * quantity; 
      $('#total').text(total); 
     } 

     function changeQuantity(num){ 
      $("#quantity").val(parseInt($("#quantity").val())+num); 
     } 

     $().ready(function(){ 
      calculate(); 
      $(".minus").click(function(){ 
       changeQuantity(-1); 
       calculate(); 
      }); 
      $(".plus").click(function(){ 
       changeQuantity(1); 
       calculate(); 
      }); 

      $("#quantity").keyup(function(e){ 
       if (e.keyCode == 38) changeQuantity(1); 
       if (e.keyCode == 40) changeQuantity(-1); 
       calculate(); 
      }); 

      var quantity = document.getElementById("quantity"); 
      quantity.addEventListener("input", function(e) { 
       calculate(); 
      }); 

      $('#total').each(function() { 
       $(this).before("Rp ") 
      }); 
     }); 

    </script> 

有人能告訴我如何使用我的腳本each()功能？ 所以我可以將表中的每一行相加。

謝謝。

https://jsfiddle.net/neuugkak/

Answer 1

ID是HTML結構中唯一的ID。如果事情重演，總是添加類並基於類進行處理。

https://jsfiddle.net/1xsc2wfb/4/

<span id="total" class="total_amount"></span> 

改變在HTML

<table class="table cart"> 
    <thead> 
     <tr> 
      <th class="cart-product-remove">&nbsp;</th> 
      <th class="cart-product-thumbnail">&nbsp;</th> 
      <th class="cart-product-name">Product</th> 
      <th class="cart-product-price">Unit Price</th> 
      <th class="cart-product-quantity">Quantity</th> 
      <th class="cart-product-subtotal">Total</th> 
     </tr> 
</thead> 
<tbody> 
     <tr class="cart_item"> 
      <td class="cart-product-remove"> 
       <a href="#" class="remove" title="Remove this item"><i class="icon-trash2"></i></a> 
      </td> 

      <td class="cart-product-thumbnail"> 
       <a href="#"><img width="64" height="64" src="images/shop/thumbs/small/dress-3.jpg" alt="Pink Printed Dress"></a> 
      </td> 

      <td class="cart-product-name"> 
       <a href="#">Pink Printed Dress</a> 
      </td> 

      <td class="cart-product-price"> 
       Rp <span id="price" class="amount">50000</span> 
      </td> 

      <td class="cart-product-quantity"> 
       <div class="quantity clearfix"> 
        <input type="button" value="-" class="minus" field="quantity"> 
        <input type="text" id="quantity" name="quantity" value="1" class="qty" /> 
        <input type="button" value="+" class="plus" field="quantity"> 
       </div> 
      </td> 

      <td class="cart-product-subtotal"> 
       <span id="total" class="total_amount"></span> 
      </td> 
     </tr> 
     <tr class="cart_item"> 
      <td class="cart-product-remove"> 
       <a href="#" class="remove" title="Remove this item"><i class="icon-trash2"></i></a> 
      </td> 

      <td class="cart-product-thumbnail"> 
       <a href="#"><img width="64" height="64" src="images/shop/thumbs/small/dress-3.jpg" alt="Pink Printed Dress"></a> 
      </td> 

      <td class="cart-product-name"> 
       <a href="#">Other Dress</a> 
      </td> 

      <td class="cart-product-price"> 
       Rp <span id="price" class="amount">40000</span> 
      </td> 

      <td class="cart-product-quantity"> 
       <div class="quantity clearfix"> 
        <input type="button" value="-" class="minus" field="quantity"> 
        <input type="text" id="quantity" name="quantity" value="1" class="qty" /> 
        <input type="button" value="+" class="plus" field="quantity"> 
       </div> 
      </td> 

      <td class="cart-product-subtotal"> 
       <span id="total" class="total_amount"></span> 
      </td> 
     </tr> 
</tbody> 

function calculate(obj){ 
     /* var price = parseFloat($('#price').text()) || 0; 
      var quantity = parseInt($('#quantity').val()); 
      var total = price * quantity; 
      $('#total').text(total);*/ 

     var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0; 
     var quantity = parseInt($(obj).parent().find('.qty').val()); 
     var total = price * quantity; 

     $(obj).parent().parent().parent().find('.total_amount').text(total);; 
    } 

    function changeQuantity(num,obj){ 
     //$("#quantity").val(parseInt($("#quantity").val())+num); 
     $(obj).parent().find('.qty').val(parseInt($(obj).parent().find('.qty').val())+num); 
    } 

    $().ready(function(){ 
     //calculate(); 
     $(".minus").click(function(){ 
      changeQuantity(-1,this); 
      calculate(this); 
     }); 
     $(".plus").click(function(){ 
      changeQuantity(1,this); 
      calculate(this); 
     }); 

     //$("#quantity").keyup(function(e){ 
      $(".qty").keyup(function(e){ 
      if (e.keyCode == 38) changeQuantity(1,this); 
      if (e.keyCode == 40) changeQuantity(-1,this); 
      calculate(this); 
     }); 

     /*var quantity = document.getElementById("quantity"); 
     quantity.addEventListener("input", function(e) { 
      calculate(); 
     }); 

     $('#total').each(function() { 
      $(this).before("Rp ") 
     });*/ 
    }); 

更新：

function changeQuantity(num,obj){ 
      //$("#quantity").val(parseInt($("#quantity").val())+num); 
      var value_to_set = parseInt($(obj).parent().find('.qty').val())+num; 
      if(value_to_set<=0){$(obj).parent().find('.qty').val(1);return;} 
      $(obj).parent().find('.qty').val(value_to_set); 
     } 

Answer 2

如果你在談論總名稱標識，那麼你需要更改ID爲類定義。因爲，ID必須是唯一的，並且如果具有相同的ID名字不止一個元素，那麼只有第一個匹配的元素纔會返回，除非你抓起來使用id選擇，試試這個：

<span class="amount total"></span> 

的js

$('.total').each(function() { 
    $(this).before("Rp ") 
}); 

Answer 3

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <style> 

      .active { 
       color:red; 
      } 
     </style> 
    <script> 


     function calculate(IN_ObjRow) { 

      var price = parseInt($(IN_ObjRow).find('td:eq(3)').find('.price').text(),10) 
      var quantity = parseInt($(IN_ObjRow).find('td:eq(4)').find('input.quantity').val(),10); 
      var total = price * quantity; 
      $(IN_ObjRow).find('td:eq(5)').find('.total').text(total); 
     } 

     function changeQuantity(num) { 
      $("#quantity").val(parseInt($("#quantity").val()) + num); 
     } 



     $(document).ready(function() { 
      $('#AddRow').click(function() { 
       var objRow = $('.cart tbody tr:first').clone(); 
       $('.cart tbody').append(objRow) 
      }); 

      calculate($('.cart tbody tr:first')); 

      $(document).on('click','.minus',function() { 
       $(this).next('.quantity').val(parseInt($(this).next('.quantity').val(),10) -1) 
       calculate($(this).closest('tr')); 
      }); 
      $(document).on('click', '.plus', function() { 
       $(this).prev('.quantity').val(parseInt($(this).prev('.quantity').val(),10) + 1) 
       calculate($(this).closest('tr')); 
      }); 

      $(".quantity").keyup(function (e) { 
       if (e.keyCode == 38) $(this).closest('.quantity').val($(this).closest('.quantity').val() + 1) 
       if (e.keyCode == 40) $(this).closest('.quantity').val($(this).closest('.quantity').val() - 1) 
       calculate($(this).closest('tr')); 
      }); 

      //var quantity = document.getElementById("quantity"); 
      //quantity.addEventListener("input", function (e) { 
      // calculate($(this).closest('tr')); 
      //}); 

      $(document).on('change', '.quantity', function() { 
       calculate($(this).closest('tr')); 

      }); 

      $('.total').each(function() { 
       $(this).before("Rp ") 
      }); 

     }); 
    </script> 
    </head> 

    <body> 
     <input type="button" id="AddRow" value="Add Row" /> 
     <table class="table cart"> 
     <thead> 
      <tr> 
       <th class="cart-product-remove">&nbsp;</th> 
       <th class="cart-product-thumbnail">&nbsp;</th> 
       <th class="cart-product-name">Product</th> 
       <th class="cart-product-price">Unit Price</th> 
       <th class="cart-product-quantity">Quantity</th> 
       <th class="cart-product-subtotal">Total</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr class="cart_item"> 
       <td class="cart-product-remove"> 
        <a href="#" class="remove" title="Remove this item"><i class="icon-trash2"></i></a> 
       </td> 

       <td class="cart-product-thumbnail"> 
        <a href="#"><img width="64" height="64" src="images/shop/thumbs/small/dress-3.jpg" alt="Pink Printed Dress"></a> 
       </td> 

       <td class="cart-product-name"> 
        <a href="#">Pink Printed Dress</a> 
       </td> 

       <td class="cart-product-price"> 
        Rp <span class="amount price">50000</span> 
       </td> 

       <td class="cart-product-quantity"> 
        <div class="quantity clearfix"> 
         <input type="button" value="-" class="minus" field="quantity"> 
         <input type="text" class="quantity" name="quantity" value="1" class="qty" /> 
         <input type="button" value="+" class="plus" field="quantity"> 
        </div> 
       </td> 

       <td class="cart-product-subtotal"> 
        <span class="amount total"></span> 
       </td> 
      </tr> 
    </tbody> 
</table> 
    </body> 

    </html>