javascript - 如何在JavaScript中对当前行进行计算

Question

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

表格第一行的 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>

动态生成表格的javascript代码:

<script type="text/javascript">
$('.tb3').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
    $lastTr = $('tr:last', $('.tb3')),
    $lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');

$lastTr.after(cloned);
}

});

计算的javascript代码:

<script >
    $(document).on('keydown','input', function ()  {


    $('.Qty').on("input change",function(){
        var $row = $(this).closest("tr");
        var price = 0;
        var total = 0;

        $('.tb3').each(function() {

            var qty = $($row).closest('tr').find('.Qty').val();
             var rate = $($row).closest('tr').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));
    });
    });
</script>

移至下一个:

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

我必须在代码中进行哪些更改...帮助我

Answer 1

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

我已将 $('.tb3') 更改为 $('.tb3 tr')，因此它将循环遍历每一行。然后在循环内，我用 $(this).find('.数量') 因为您已经在该行中。

请参阅下面更正后的代码，

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

fiddle 链接，

https://jsfiddle.net/anjanasilva/dykm6wau/