各行の価格を計算します

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

これはあなたが望む結果であるかどうかわかりません。しかし、私は2つの合計量の列を正しく合算するようなコードを作っています。

はただ、これにtotalamount機能の下を変更：

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

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

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

そして@mrEtholが正しく指摘したように、これも同様に固定する必要があります。

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

へ

$('.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