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')，因此它将遍历每一行。然后在循环内，我用$($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));
    });
 });

链接到小提琴，

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

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

1 个答案: