Multiplikation von 2 Spalten in jQuery

Question

Ich möchte die Multiplikation von 2 Spalten jeder Zeile. Das ist mein Code und auch ein Skript. Dieses Skript funktioniert, aber nur für die erste Zeile des Skripts ist die Ausgabe:

Das Ergebnis der zweiten Zeile ist falsch:

<form> 
<table id="my-table"> 
    <?php 
    $query3 = mysqli_query($con,"select * from orders") or die("sdfsfs"); 
    while($row3=mysqli_fetch_array($query3)) 
    { 
     $quantity = $row3['quantity']; 
     $unit_price = $row3['unit_price']; 
     //$total = $quantity * $unit_price; 
    ?> 
     <tr> 
      <td><input type="text" class="common quantity" name="1" id="quant" value="<?php echo $quantity; ?>"></td> 
      <td><input type="text" class="common price" name="2" id="units" value="<?php echo $unit_price; ?>"></td> 
      <td><input type="text" class="total" name="3" id="total" readonly></td> 
     </tr> 
<?php } ?> 
     <tr> 
      <td colspan="2"><label class="form-control">Subtotal</label></td> 
      <td><input name="subtotal" readonly id="subtotal" class="sub" type="text" /></td> 
     </tr> 
</table> 
</form> 

jQuery

<script> 
     $(".total").each(function() { 
     $('.total').val(parseFloat($('#quant').val()) * parseFloat($('#units').val())); 
     }); 
</script> 

Answer 1

Iterate über die Zeilen und Gebrauchsklasse statt IDs sonst ist es nur der erste nur abgestimmt nehmen:

$("#my-table tr:not(:last)").each(function() { 

    $(this).find('.total').val(parseFloat($(this).find('.quantity').val()) * parseFloat($(this).find('.price').val())); 
    }); 

}); 

Answer 2

Das liegt daran, dass Sie in jeder Zeile die gleiche ID haben, sodass Ihr Code immer zuerst diese ID erfasst - berechnet also immer nur die ersten Zeilenwerte. Ersetzen-IDs mit Klassen

$(document).ready(function() { 
 
    $('.quantity, .price').change(function() { 
 
    var parent = $(this).closest('tr'); 
 
    parent.find('.total').val(parseFloat(parent.find('.quantity').val()) * parseFloat(parent.find('.price').val())) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="text" class="common quantity quant" name="1"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="common price units" name="2"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="total" name="3" class="total" readonly> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" class="common quantity quant" name="1"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="common price units" name="2"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="total" name="3" class="total" readonly> 
 
    </td> 
 
    </tr> 
 
</table>