Wie bekomme ich die Summe aller Textfelder einer Tabelle mit jquery?

Question

Ich habe eine Datentabelle, die 7 Spalten hat. Die letzte Spalte enthält Textfelder, in die der Benutzer den Zahlungsbetrag eingeben kann. Im Folgenden ist der HTML-Code für das gleiche:

<table id="multiple-account-table" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr class="border-class"> 
      <th>Employee Name</th> 
      <th>Account Number</th> 
      <th>Account Name</th> 
      <th>Alias</th> 
      <th>Due Date</th> 
      <th>Total Due</th> 
      <th>Payment Amount</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th></th> 
       <th id="payment-footer"></th> 
      </tr> 
      </tfoot> 
</table> 

Die Zeilen der Tabelle werden dynamisch Datentabelle Methode der Verwendung von jQuery erzeugt zu werden.

Im Folgenden ist der HTML-Code für die Textbox in letzter Spalte:

<input type="number" id="payement-textbox" class="payment" step="any" maxlength="9" value="" name="payment-textbox" placeholder="--"/> 

Meine Forderung ist, dass, wenn der Benutzer einen Betrag innerhalb jeden Textfeldes ein, dann Summe der Textbox zur gleichen Zeit aktualisiert werden soll. Die Summe des Zahlungsbetrags in allen Textfeldern wird im Tabellenfuß angezeigt. Der Benutzer muss den Betrag nicht in alle Textfelder eingeben. So wird die Summe für alle Zeilen angezeigt, in denen der Benutzer einen beliebigen Wert eingegeben hat.

Ich schrieb jQuery-Code, der gut funktioniert. Nur Problem ist, dass, wenn Benutzer den Wert im Textfeld reduzieren, dann die Summe nicht entsprechend reduziert wird. Angenommen, der Benutzer hat 50 im ersten Textfeld und 100 im zweiten Textfeld eingegeben, dann wird die Summe mit "150" angezeigt, was korrekt ist.

Aber wenn Benutzer den Wert des zweiten Textfelds auf 50 ändern, wird die Summe "150" anstelle von "100" angezeigt.

Unten ist mein jQuery-Code:

$(document).on("blur paste",'input.payment', function(event) { 
    //taking value of sum which is initially zero 

    var temp = $("#payment-footer").html(); 
    var sum = parseFloat(temp); 
    if($(this).val() != ""){ 
    var sum = sum + parseFloat($(this).val()); 
    $("#payment-footer").html('$'+sum); 
    } 
}); 

Answer 1

Iterate Schleife durch alle Textfelder von Datentabelle und die Summe daraus machen.

$(document).on("blur paste",'#multiple-account-table input.payment', function(event) { 
     var sum = 0; 
     //Loop through all the textboxes of datatable and make sum of the values of it. 
     $.each('#multiple-account-table input.payment',function(){ 
     var sum = sum + parseFloat($(this).val()); 
     }); 
     //Replace the latest sum. 
     $("#payment-footer").html(sum); 
    });