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

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

范例

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

如果您为每个事件单独编写，这将非常容易尝试以下操作

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


$（文档）.ready（函数（）{
$（“.qty”）.keyup（函数（）{
$（this）.closest（'tr'）.find（'.amount'）.val（$（this.val（）*$（this）.closest（'tr'）.find（'.price'）.val（））；
});    
$（“.price”）.keyup（函数（）{
$（this）.closest（'tr'）.find（'.amount'）.val（$（this）.closest（'tr'）.find（'.qty'）.val（）*$（this.val（））；
}); 
}); 

$（“.price，.qty”）.keyup（函数（）{
var curName=$（this.attr（'name'）；
var reqName=''；
如果（curName.indexOf（“数量”）！=-1）{
reqName=curName.substr（3）；
}否则{
reqName=curName.substr（5）；
}
$（“输入[name='amount'+reqName+']”）val（$（“输入[name='qty'+reqName+']”）val（）*$（“输入[name='price'+reqName+']”）val（））；
});
我解决了。。我只是改变它，而不是使用类，我使用ID，然后把变量x放在ID中，也把变量x放在我的JS上

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


$("#price<?=$x;?>,#qty<?=$x;?>").keyup(function () {
 $('#amount<?=$x;?>').val($('#qty<?=$x;?>').val() * $('#price<?=$x;?>').val());
});


您需要处理正确的金额字段，例如，通过搜索当前行中的
.amount
类。您还可以解析name值以获取数字，以便查找正确的name属性。您可能应该使用数组作为表单元素名称，以使其更简单。这就是为什么我在类中添加了变量x，并通过将变量x放入文本框的名称中来给出唯一的名称。是的，但是
$（'.amount'）
将处理所有金额输入。那么如何使其具有唯一的金额呢。我不是JSYes方面的专家，尽管您应该解释它是如何工作的以及为什么工作的，而不仅仅是post代码。此代码将在所有行中显示相同的结果。例如，第1行和第3行=第3行第2行1和第5行=第3行。。我尝试了你的代码事件没有工作？尝试将代码放入$（document）.ready（）中相同的无结果显示只需尝试上面我现在放入的代码即可。它也在工作。并根据诽谤。因为在每个用户系统上，短代码都在工作，这是不确定的。
<script>
    $(".price,.qty").keyup(function () {
        var curName = $(this).attr('name');
        var reqName = '';

        if (curName.indexOf("qty") != -1) {
         reqName = curName.substr(3);
        } else {
          reqName = curName.substr(5);
        }
        $("input[name='amount"+reqName+"']").val($("input[name='qty"+reqName+"']").val() * $("input[name='price"+reqName+"']").val());
    });
</script>

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


$("#price<?=$x;?>,#qty<?=$x;?>").keyup(function () {
 $('#amount<?=$x;?>').val($('#qty<?=$x;?>').val() * $('#price<?=$x;?>').val());
});