javascript - 在循环内将两个文本框相乘并在第三个文本框上显示结果

Question

此代码将生成 10 行 textbox1、textbox2 和 textbox3。如果我在循环 1 中的文本框的第一行中输入值。例如 1 和 3 相乘，结果为 3 。但随后它将在所有循环中显示结果。我怎样才能让它只在loop1.？

示例

        QTY    PRICE   AMOUNT

line1    1        2      3
line2                    3
line3                    3
line4                    3
line5                    3
line6                    3
line7                    3
line8                    3
line9                    3
line10                   3

PHP HTML 代码

<?php for($x=1; $x<=10; $x++){?>
<tr> 
    <td><input type="text" name="qty<?=$x;?>" class="qty form-control" size="6"/></td>
    <td><input type="text" name="price<?=$x;?>" class="price form-control" /></td>
    <td><input type="text" name="amount<?=$x;?>" class="amount form-control"></td>
</tr>
<?php } ?>

JS 代码

<script>
    $(".price,.qty").keyup(function () {
      $('.amount').val($('.qty').val() * $('.price').val());
    });
</script>

Answer 1

如果你为每个事件单独编写，这会很容易尝试这个，

  <script>
 $(document).ready(function(){
        $(".qty").keyup(function () {
        $(this).closest('tr').find('.amount').val($(this).val() *    $(this).closest('tr').find('.price').val());
    });    

     $(".price").keyup(function () {
      $(this).closest('tr').find('.amount').val($(this).closest('tr').find('.qty').val() * $(this).val());
    }); 
}); 
</script>