如何在JavaScript中对当前行执行计算

我想计算数量和比率的乘法，该乘法将显示在金额框中。我的问题是乘法结果将显示在表的所有行中。下面我附上了屏幕截图

表格第一行的html代码：

 <table class="tb3" name="tb3">
<tr >                       
    <td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>
    <td><input  type="text" onchange="fetchdetails(this)" class="Product_Code" name="Prdtcode[]" class="form-control input-xs Product_Code "   required></td>
    <td ><input type="text" class="Product_Name" name="Prdtname[]" class="form-control input-xs"   > </td>
    <td><input  type="text" 
    onkeypress="javascript:doit_onkeypress(event)"  class="Qty" onkeyup="movetoNext(this, 'addMore3')" name="Qty[]"class="form-control input-xs" required ></td>
    <td><input  type="text" class="Rate"  class="form-control input-xs"name="Rate[]" value="" ></td>
    <td><input  type="text" class="Value"  class="form-control input-xs"name="amount[]" value=""  ></td>
</tr>

---

我必须在代码中做哪些修改…请帮助我，您使用的循环方法似乎有一些问题

我已将

$（'.tb3'）

更改为

$（'.tb3 tr'）

，因此它将在每一行中循环。然后，在循环内部，我将

$（$row）.closest（'tr'）.find（'.Qty'）

等实例替换为

$（this）.find（'.Qty'）

，因为您已经在行中了

请参阅下面更正的代码

$(document).on('keydown','input', function ()  {
    $('.Qty').on("input change",function(){

        var $row = $(this).closest("tr");
        var price = 0;
        var total = 0;

        $('.tb3 tr').each(function() {
             var qty = $(this).find('.Qty').val();
             var rate = $(this).find('.Rate').val();
             var price =  qty * rate;
             $(this).find('.Value').val(price);
             total += parseFloat(price);
        });
         $('#TieTotal').val(total.toFixed(2));
    });

    $('.Value').on(function(){
         $('.tb3').each(function() { });
         $('#TieTotal').val(total.toFixed(2));
    });
 });

链接到小提琴，

---

您使用的循环方法似乎存在一些问题

我已将

$（'.tb3'）

更改为

$（'.tb3 tr'）

，因此它将在每一行中循环。然后，在循环内部，我将

$（$row）.closest（'tr'）.find（'.Qty'）

等实例替换为

$（this）.find（'.Qty'）

，因为您已经在行中了

请参阅下面更正的代码

$(document).on('keydown','input', function ()  {
    $('.Qty').on("input change",function(){

        var $row = $(this).closest("tr");
        var price = 0;
        var total = 0;

        $('.tb3 tr').each(function() {
             var qty = $(this).find('.Qty').val();
             var rate = $(this).find('.Rate').val();
             var price =  qty * rate;
             $(this).find('.Value').val(price);
             total += parseFloat(price);
        });
         $('#TieTotal').val(total.toFixed(2));
    });

    $('.Value').on(function(){
         $('.tb3').each(function() { });
         $('#TieTotal').val(total.toFixed(2));
    });
 });

链接到小提琴，

---

---

您好，您还可以粘贴

doit_on keypress

和

movetoNext

功能吗？完成。检查上面哪个元素有

.tb3

？我看到同一元素的mutlipe类属性。在

name

attributetb3之前添加空格，因为下面的语句：$（this）.find（'.Value'）.val（price）；它将更新所有类名为“value”的元素的值。您好，您是否也可以粘贴

doit\u onkeypress

和

movetoNext

函数？完成。检查上面哪个元素有

.tb3

？我看到同一元素的mutlipe类属性。在

name

attributetb3之前添加空格，因为下面的语句：$（this）.find（'.Value'）.val（price）；它会将值更新为所有类名为“value”的元素。您可以创建一个堆栈片段，而不是生成JSFIDLE。这将显示在此页面上，因此更易于访问。这是编辑工具栏中的

按钮，iirc。先生，还有一个帮助@Anjana Silvawa那是什么@laavanyadharani？先生，当行被删除时，我想再次计算金额的总和。你能帮我吗？不要叫我先生：D。我将看一看：）@laavanyadharani您可以制作一个堆栈片段，而不是制作一个jsfiddle。这将显示在此页面上，因此更易于访问。这是编辑工具栏中的

按钮，iirc。先生，还有一个帮助@Anjana Silvawa那是什么@laavanyadharani？先生，当行被删除时，我想再次计算金额的总和。你能帮我吗？不要叫我先生：D。我来看看：）@laavanyadharani

function movetoNext(current, nextFieldID) {
if (current.value.length == 1) {
document.getElementById(nextFieldID).focus();
}
}

$(document).on('keydown','input', function ()  {
    $('.Qty').on("input change",function(){

        var $row = $(this).closest("tr");
        var price = 0;
        var total = 0;

        $('.tb3 tr').each(function() {
             var qty = $(this).find('.Qty').val();
             var rate = $(this).find('.Rate').val();
             var price =  qty * rate;
             $(this).find('.Value').val(price);
             total += parseFloat(price);
        });
         $('#TieTotal').val(total.toFixed(2));
    });

    $('.Value').on(function(){
         $('.tb3').each(function() { });
         $('#TieTotal').val(total.toFixed(2));
    });
 });