Berechnen Sie den Preis für jede Zeile

Question

Ich bin fest mit der Berechnung des Preises für jede Zeile. Wenn ich das Mengenfeld anwähle, wird für beide Zeilen der gleiche Preis gedruckt.

Hier ist meine Demo https://jsfiddle.net/keyro/fw8t3ehs/2/

Vielen Dank im Voraus.

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

Nicht sicher, ob dies das Ergebnis ist, dass Sie möchten. Aber ich habe den Code gemacht, um die zwei Menge Spalten richtig zu summieren.

verändert einfach die unten totalamount Funktion dazu:

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

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

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

Und wie @mrEthol ganz richtig gesagt, sollte dies auch festgesetzt:

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

zu

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

Also beide Berechnungen werden funktionieren.

Demo.

Answer 2

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

Änderung:

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

Answer 3

Schleife durch jede Tabellenanordnung und die Werte finden und ergänzen, dass Reihen Betrag nur $(v).find('.amount').text(amt); verwenden. Ich denke, das wird dir helfen.

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