計算每一行的價格

Question

我堅持計算每行的價格。如果我選擇數量字段，它將爲兩行打印相同的價格。

這裏是我的演示 https://jsfiddle.net/keyro/fw8t3ehs/2/

預先感謝您。

的Html

<table class="table table-condensed table-hover" id="myTable"> 
       <thead> 
        <tr> 
         <th>Product</th> 
         <th class="text-center">Quantity</th> 
         <th class="text-right">Price ($)</th> 
        </tr> 
       </thead> 
       <tbody class="body"> 
        <tr data-id="1" data-price="20.00"> 
         <td>Apple ($20)</td> 
         <td><select class="form-control product_quantities" name="product_quantities[]"> 
           <option value="0">0</option> 
           <option value="1">1</option> 
           <option value="2">2</option> 
           <option value="3">3</option> 
           <option value="4">4</option> 
           <option value="5">5</option> 
          </select></td> 
         <td class="text-right amount" name="amount[]">0</td> 
        </tr> 
        <tr data-id="2" data-price="15.00"> 
         <td>Banana ($15)</td> 
         <td><select class="form-control product_quantities" name="product_quantities[]"> 
           <option value="0">0</option> 
           <option value="1">1</option> 
           <option value="2">2</option> 
           <option value="3">3</option> 
           <option value="4">4</option> 
           <option value="5">5</option> 
          </select></td> 
         <td class="text-right amount" name="amount[]">0</td> 
        </tr> 
        <tr> 
         <td class="text-right bold">TOTAL</td> 
         <td class="text-center bold">1</td> 
         <td class="text-right bold"><b class="total">0</b></td> 
        </tr> 
       </tbody> 
      </table> 

的Javascript

 function totalamount() { 
     var q = 0; 

     var rows = document.getElementById('myTable').getElementsByTagName("tbody")[0].getElementsByTagName("tr").length; 

     for(var i = 0; i < rows; i++){ 
      var z = $('.amount').html(); 
      q +=z; 
     } 
     $('.total').html(z); 
    } 

    $(function() { 
     $('.body').delegate('.product_quantities','change',function(){ 
      var tr = $(this).parent().parent(); 
      var qty = tr.find('.product_quantities option:selected').attr('value'); 
      var price = tr.data('price'); 

      var total = (price * qty); 
      $('.amount').html(total); 
      totalamount() 
     }); 
    }); 

Answer 1

不知道這是否是你想要的結果。但是我已經使代碼正確地總結了兩個的數量列。

只是改變totalamount功能的底部，這樣的：

for(var i = 0; i < rows; i++){ 
    var z = $('.amount:eq(' + i + ')').html(); 

    if (!isNaN(z)) { 
     q +=Number(z); 
    } 
} 

$('.total').html(q); 

而作爲@mrEthol正確地指出，這應該是固定的，以及：

$('.amount').html(total); 

到

tr.find('.amount').html(total); 

所以兩種計算都可以工作。

Demo。

Answer 2

$('.amount').html(total); 

變化：

tr.find('.amount').html(total); 

Answer 3

循環每一個表陣列和找到的值，並添加到該行的量只使用$(v).find('.amount').text(amt);。我認爲這會幫助你。

function totalamount() { 
     var q = 0; 


     $('.body tr').each(function(index, v){ 
      var cost = Number($(v).data('price')); 
      var qty = Number($(v).find('.product_quantities').val()); 
      if(!isNaN(cost) && !isNaN(qty)){ 
      var amt = Number(cost*qty); 

      $(v).find('.amount').text(amt); 

      q = q + amt 
      console.log(qty, cost, q);} 
     }) 
     $('.total').text(q); 


    } 

    $(function() { 
     $('.body').delegate('.product_quantities','change',function(){ 

      totalamount() 
     }); 
    }); 

JSFIDDLE