Question

添加新发票行时。我想在最后一个字段中得到小计。只有第一行正常工作。当我添加新行时，行计算没有发生

Sl no：Item。：项目描述：价格：税率。：小计：我想在每行输入数量和价格时计算每个的小计...使用jquery或javascript。

    $(function () {
   // Append Invoice Line
       $(document).on('click', '#addnewitem', function () {
        var currentTable = $(this).closest('table').attr('id');
         $('#' + currentTable ).append('<tr><td><div class="col-sm-6 col-lg-12"><input                     type="Client Name" class="form-control" id="c_name" placeholder="Item"></div></td><td><div class="col-sm-6 col-lg-12"><textarea class="form-control" placeholder="Description" rows="2" > </textarea></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control" id="item_price" placeholder="Item Price" name="item_price"></div></td><td><div class="col-sm-6 col-lg-12"><select name="tax" class="form-control" id="tax"><option value="0">None</option><option value="12.5">(12.5%) Service Tax </option></select></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price" id="item_tax" placeholder="Tax Amount"  name="item_tax"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price" id="sub_total" placeholder="Sub Total"  name="sub_total[]"></div></td><td><button type="button" id="removeItem" class="btn btn-default removeItem"><span class="glyphicon glyphicon-trash"></span></td></tr>');
  });





 //Remove Invoice Line
     $(document).on('click', '#removeItem', function () { 
        var currentTable = $(this).closest('table').attr('id');
      $(this).closest('tr').remove();
 calculateTableSum(currentTable);
  calculateTotal();
     });


      function calculateSum() {
      var currentTable = $(this).closest('table').attr('id');
     calculateTableSum(currentTable);
      }

      function calculateTableSum(currentTable) {
     var sum = 0;
            $('#' + currentTable + ' input#sub_total').each(function() {
    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0) {
        sum += parseFloat(this.value);
    }
       });
         //.toFixed() method will roundoff the final sum to 2 decimal places
        $('#' + currentTable + ' input.sumamtcollected').val(sum.toFixed(2));
        }
        $(document).on('change', 'input#sub_total', calculateSum);


  $('#tax').on('change', function () { 
  var currentTable = $(this).closest('table').attr('id');
  var itemprice = $('#item_price').val();
   var  taxrate = $('#tax').val();

  var tax = taxrate * itemprice /100;
var total = parseFloat(itemprice) + parseFloat(tax);

  $('#item_tax').val(tax.toFixed(2));
   $('#sub_total').val(total.toFixed(2));
   calculateTableSum(currentTable);
   calculateTotal();
});


});

Answer 1

您正在创建多个相同的ID。你会想要做很多事情。

创建一个增量器，以便ids是唯一的
在为新元素添加新行时添加侦听器

fiddle

更新了JS：

$(function() {
    var INC = 0;
    // Append Invoice Line
    $('#addnewitem').click(function() {
        INC++;
        var currentTable = $(this).closest('table').attr('id');
        $('#' + currentTable).append('<tr><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control" id="c_name_' + INC + '" placeholder="Item"></div></td><td><div class="col-sm-6 col-lg-12"><textarea class="form-control" placeholder="Description" rows="2" > </textarea></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control" id="item_price_' + INC + '" placeholder="Item Price" name="item_price"></div></td><td><div class="col-sm-6 col-lg-12"><select name="tax" class="form-control" id="tax_' + INC + '"><option value="0">None</option><option value="12.5">(12.5%) Service Tax </option></select></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price" id="item_tax_' + INC + '" placeholder="Tax Amount"  name="item_tax"></div></td><td><div class="col-sm-6 col-lg-12"><input type="Client Name" class="form-control price" id="sub_total_' + INC + '" placeholder="Sub Total"  name="sub_total_' + INC + '"></div></td><td><button type="button" id="removeItem_' + INC + '" class="btn btn-default removeItem"><span class="glyphicon glyphicon-trash"></span></td></tr>').promise().done(function() {
            $('#sub_total_' + INC).on('change', calculateSum);
            $('#tax_' + INC).on('change', function() {
                doMain(INC)
            });
        });
    });

    //Remove Invoice Line
    $('#removeItem').click(function() {
        var currentTable = $(this).closest('table').attr('id');
        $(this).closest('tr').remove();
        calculateTableSum(currentTable);
        calculateTotal();
    });

    function calculateTotal() {
    }

    function calculateSum() {
        var currentTable = $(this).closest('table').attr('id');
        calculateTableSum(currentTable);
    }

    function calculateTableSum(currentTable) {
        var sum = 0;
        $('#' + currentTable + ' input[id^=sub_total]').each(function() {
            //add only if the value is number
            if (!isNaN($(this).val()) && $(this).val().length != 0) {
                sum += parseFloat($(this).val());
            }
        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $('#' + currentTable + ' input.sumamtcollected').val(sum.toFixed(2));
    }

    $('#sub_total').on('change', calculateSum);

    function doMain(num) {
        if (num === 0) {
            var currentTable = $(this).closest('table').attr('id');
            var itemprice = $('#item_price').val();
            var taxrate = $('#tax').val();

            var tax = taxrate * itemprice / 100;
            var total = parseFloat(itemprice) + parseFloat(tax);

            $('#item_tax').val(tax.toFixed(2));
            $('#sub_total').val(total.toFixed(2));
            calculateTableSum(currentTable);
            calculateTotal();
        } else {
            var currentTable = $(this).closest('table').attr('id');
            var itemprice = $('#item_price_' + num).val();
            var taxrate = $('#tax_' + num).val();

            var tax = taxrate * itemprice / 100;
            var total = parseFloat(itemprice) + parseFloat(tax);

            $('#item_tax_' + num).val(tax.toFixed(2));
            $('#sub_total_' + num).val(total.toFixed(2));
            calculateTableSum(currentTable);
            calculateTotal();
        }
    }

    $('#tax').on('change', function() {
        doMain(0);
    });

});

行jquery中的动态输入字段小计

1 个答案: