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

Question

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

Sl 编号 ： 项目 . ：

项目描述 ： 价格 ： 税率. ： 小计 ：我希望在每行输入数量和价格后立即计算每个小计。.使用 jquery 或 JavaScript。

http://jsfiddle.net/vXHa6/

    $(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。你会想要做很多事情。

1. 创建增量器，使 id 是唯一的
2. 在为新元素添加新行时添加侦听器

小提琴

更新的 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);
    });
});