Fabrikat in einer dynamischen Tabelle berechnet jquery mit

Question

Ich habe ein Problem mit dynamischer Tabelle jQuery Menge zu berechnen verwenden und insgesamt

dies my code

Betrag = Menge * p.unit und insgesamt ist die Summe der Menge

Answer 1

Ich denke, eine Menge Leute werden tab zwischen den Feldern. Zu diesem Zweck schlage ich vor, an die Ereignisse focus und blur gebunden zu sein. Hier ist ein funktionierendes Beispiel: https://jsfiddle.net/Twisty/epqhhtfc/

HTML

<table id="purchaseItems" name="purchaseItems" align="center"> 
    <tr> 
    <th>Quantity</th> 
    <th>P.Unit ($)</th> 
    <th>Amount ($)</th> 
    </tr> 
    <tr> 
    <td> 
     <input type="text" name="quantity[]" class="next" required /> 
    </td> 
    <td> 
     <input type="text" name="price[]" class="next" required /> 
    </td> 
    <td> 
     <input type="text" name="amount[]" class="next last" required /> 
    </td> 
    <td> 
     <input type="button" name="addRow[]" class="add" value='+' /> 
    </td> 
    <td> 
     <input type="button" name="addRow[]" class="removeRow" value='-' /> 
    </td> 
    </tr> 
    <tr> 
    <th>Total :</th> 
    <td colspan='2' id="totalPrice"></td> 
    </tr> 
</table> 

JQuery

$(document).ready(function() { 
    $(document).on('click', '#purchaseItems .add', function() { 
    var row = $(this).parents('tr'); 
    var clone = row.clone(); 

    // clear the values 
    var tr = clone.closest('tr'); 
    tr.find('input[type=text]').val(''); 

    $(this).closest('tr').after(clone); 
    var total = 0; 
    $(".last").each(function() { 
     if (!$(this).val() == '') { 
     total = total + parseFloat($(this).val()); 
     } 
    }) 
    $("#totalPrice").html("$" + total); 
    }); 
    $(document).on("blur", ".last", function() { 
    var total = 0; 
    $(".last").each(function() { 
     if (!$(this).val() == '') { 
     total = total + parseFloat($(this).val()); 
     } 
    }) 
    $("#totalPrice").html("$" + total); 
    }); 
    $(document).on('focus', ".last", function() { 
    var $qty = $(this).parents("tr").find("input[name^='quantity']"); 
    var $pr = $(this).parents("tr").find("input[name^='price']"); 
    var $amnt = $(this).parents("tr").find("input[name^='amount']"); 
    var a = 0; 
    if ($qty.val() == '' || $pr.val() == '') { 
     console.log("No values found."); 
     return false; 
    } else { 
     console.log("Converting: ", $qty.val(), $pr.val()); 
     var q = parseInt($qty.val()); 
     var p = parseFloat($pr.val()); 
     console.log("Values found: ", q, p); 
    } 
    a = q * p; 
    $amnt.val(Math.round(a * 100)/100); 
    }); 
    $(document).on('click', '#purchaseItems .removeRow', function() { 
    if ($('#purchaseItems .add').length > 1) { 
     $(this).closest('tr').remove(); 
    } 
    }); 
}); 

ich die Klassennamen und Feldnamen angepasst, um die Spaltenüberschriften zu passen. Wenn eine Zeile hinzugefügt wird oder das Feld last den Fokus verliert, wird total aktualisiert. Ich bin nicht zurück gegangen und habe das gemacht, wenn eine Reihe entfernt wurde, aber ich denke, dass du damit umgehen kannst.

Da Felder immer ein string Wert sind, verwende ich parseInt() und parseFloat(), um sie in verwendbare Werte für Math zu werfen. Sobald die Berechnung abgeschlossen ist, runde ich sie auf 2 Dezimalstellen ab. Die Fokussierung auf das Feld last ermöglicht es dem Benutzer, auf andere Felder zu klicken oder zu klicken, Werte nach Belieben einzugeben oder zu ändern, und der Betrag wird aktualisiert. Der einzige Nachteil hier ist, dass, wenn der Benutzer den Wert ändert und nicht auf den Betrag konzentriert, keine Aktualisierung.

So Benutzer kann eine Reihe von Zeilen hinzufügen und dann zurück gehen, füllen Sie sie oder sie können eine Zeile auffüllen und eine Zeile hinzufügen. So oder so funktioniert es und ermöglicht dem Benutzer zu wählen, wie sie die Daten eingeben möchten.

Nicht sicher, wie jquery in diesen Beitrag eingeht.