在jQuery中乘以2列

Question

我想要每行2列的乘法运算。这是我的代码，也是一个脚本。此脚本正在运行，但仅针对第一行输出此脚本：

第二行的结果是错误的：

<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

迭代行并使用类而不是ID＆＃39;否则它只采取第一个匹配的行：

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

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

});

Answer 2

因为你在每一行都有相同的ID，所以你的代码总是第一次出现这个ID - 所以总是只计算第一行的值。用类

替换ID

＆＃13;

＆＃13;

$(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()))
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;