Question

每行的动态输入价格，税率和小计显示。小计字段中小计显示的总和当我们输入显示减去折扣

小提琴工作第一排税计算。添加新字段时动态税率计算无法正常工作。

$(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="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" value="-"><span class="glyphicon glyphicon-trash">DELETE</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的元素。使用类而不是ID。（相关元素是您使用“添加”按钮添加的所有元素）。您永远不应将相同的ID分配给多个元素。

第二个问题：您没有将change回调分配给新添加的输入。做这样的事情：

var onChangeCallback = 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();
};

$('.tax').on('change', onChangeCallback);

在你的点击处理程序中：

$(document).on('click', '#addnewitem', function () {
      var currentTable = $(this).closest('table').attr('id');
      $('#' + currentTable ).append('A LOT OF HTML TO REWRITE WITH CLASSES INSTEAD OF IDS');
      $('.tax').on('change', onChangeCallback); // this line must be added
});

一旦你完成了这项工作，你将面临第三个问题：onChangeCallback函数使用$('.item_price')等常规选择器这一事实。这样可以更改所有字段的值，而不是仅更改一个字段。您可以尝试使用.closest()或parent()来解决此问题。

希望这会有所帮助，但我认为有很多重写要做。告诉我，如果你遇到麻烦，我会尽力帮助你。

编辑：正如我告诉过你我会帮助你的，这是一个工作小提琴http://jsfiddle.net/vXHa6/13/

但是，你应该花时间自己做这项工作，以了解你的错误是什么，只使用我的小提琴作为“可能的解决方案”。此外，通过自己完成工作，你会遇到更多问题，你会学到更多东西，最终你会得到比我更好的解决方案。

动态输入字段计算小计和总计

1 个答案: