Jquery, Summe der Felder berechnen (dynamisch)

Question

Ich hatte eine Suche, aber habe nichts gefunden, was ich wirklich versuche.

Ich habe eine dynamische Form, die 2 Eingabefelder pro Artikel hat, 1 ist ein Wert und der andere ist eine Menge. Zum Beispiel

<table class="table table-striped table-condensed table-bordered"> 
<thead> 
    <tr> 
     <th>Item</th> 
     <th width="20%">Value</th> 
     <th width="20%">Quantity</th> 
     <th class="actions">Total</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Item</td> 
     <td><input type="text" class="input-small" name="var_1" value="0"></td> 
     <td><input type="text" class="input-small" name="var_1_1" value="0"></td> 
     <td>$<span class="amount"></span> </td> 
    </tr> 
    <tr> 
     <td>Item</td> 
     <td><input type="text" class="input-small" name="var_2" value="0"></td> 
     <td><input type="text" class="input-small" name="var_2_2" value="0"></td> 
     <td>$<span class="amount"></span> </td> 
    </tr> 
    <tr> 
     <td colspan="3"><strong>Total event cost (viability)</strong></td> 
     <td><strong>$<div class="total_amount">total</div></strong></td> 
    </tr> 
</tbody> 

Also muss ich val_1 X val_1_1 = Gesamt berechnen und dann die Summe am Ende alles zusammen (für jedes Element).

Ich hatte gehofft, ich würde etwas finden, das mit unbegrenzten Produkten arbeiten wird.

Answer 1

Wie wäre es damit: jsFiddle example.

jQuery:

function doCalc() { 
    var total = 0; 
    $('tr').each(function() { 
     $(this).find('span.amount').html($('input:eq(0)', this).val() * $('input:eq(1)', this).val()); 
    }); 
    $('.amount').each(function() { 
     total += parseInt($(this).text(),10); 
    }); 
    $('div.total_amount').html(total); 
} 
$('button').click(doCalc);​ 

Answer 2

Ich denke, das wird tun, was Sie suchen.

function calcCost() { 
    var total = 0; 

    $('table tr').each(function() { 
    if ($(this).find('td').length && $(this).find('td input').length) { 
     var quant = parseInt($(this).find('td input').eq(0).val()), 
     price = parseInt($(this).find('td input').eq(1).val()); 
     $(this).find('.amount').html(quant * price); 
     total += quant * price; 
    } 
    }); 

    $('.total_amount').html(total); 
} 

calcCost(); 

$('input').on('keyup', function() { 
    calcCost(); 
}); 

Answer 3

Ihr größtes Problem ist wirklich, dass Sie keinen einfachen Weg, um sicherzustellen, dass Sie erkennen, welche Felder Werte sind und welche sind Mengen. So wie Sie es geschrieben haben, könnte jeder Feldname mit einem einzelnen Unterstrich ein Wert sein, aber was ist mit Feldern mit dem Namen "some_value_1"?

Die Tabellenpositionierung ist eine gute Lösung, solange niemand mehr Spalten zu Ihrer Tabelle hinzufügt. Ich denke, Sie sollten eine Klasse verwenden, um entweder anzugeben, welche Felder ein Wert sind oder welche Mengen.

meine Lösung Auf jeden Fall, etwas weitschweifig für Klarheit: anzeigen

<form> 
     <label>cost: <input type="text" name="cost_1" size="5" class="summable"/></label> 
     <label>qty: <input type="text" name="cost_1_qty" size="2"/></label><br/> 

     <label>cost: <input type="text" name="cost_2" size="5" class="summable"/></label> 
     <label>qty: <input type="text" name="cost_2_qty" size="2"/></label><br/> 

     <label>cost: <input type="text" name="cost_3" size="5" class="summable"/></label> 
     <label>qty: <input type="text" name="cost_3_qty" size="2"/></label><br/> 

     <strong id="summation"></strong><br/> 
    </form> 
    <script type="text/javascript"> 

     function doTotal() { 
      var total = 0.0; 

      $(".summable").each(function (idx, element) { 
       $this = $(this); 

       var cost = parseFloat($this.val()); 
       var qty_selector = '[name=' + $this.attr('name') + '_qty' + ']'; // eg: [name=cost_3_qty] 
       var qty = parseFloat($(qty_selector).val()); 
       if (cost && qty) 
        total += cost * qty ; 
      }); 

      $("#summation").html(total.toFixed(2)); 
     } 

     $(document).ready(function() { 
      $("input[type=text]").blur(function (e) { 
       doTotal(); 
      }) 
     });   
    </script>