jquery - 从动态创建的元素中获取总和

Question

我正在构建一个表格来计算某些服务的总和。 用户必须输入净额和增值税金额（%），然后程序应该计算总金额和总增值税金额。 每次更改输入字段之一时，它应自动更新总计和增值税总计框。 用户也可以插入多行（相同的类，唯一的 id），这些也必须汇总！ 这就是我到目前为止所做的 FIDDLE 。

使用下面的代码，我设法仅计算了第一行，如果我插入.each()以便它将计算代码中的每个元素，那么它不起作用！ 并且没有错误！ 不应该每个都返回其元素中指定的所有值吗？

$('#sig_3').on('change','.vat_calc',function(){
    var id = $(this).attr('id');
    var id_suffix_new = id.split('_').pop();
    var amount_val = parseFloat($('#amount_'+id_suffix_new).val());
    var vat_val = parseFloat($('#vat_'+id_suffix_new).val());
    var vat_amount = amount_val * vat_val;
    $('#vat_amount_'+id_suffix_new).val( parseFloat(vat_amount));
    total = amount_val+vat_amount;
    $('#total').val(parseFloat(total));
});

Answer 1

已更新您的小提琴，这是链接 - https://jsfiddle.net/bn4na8qc/3/

 $('ul').each(function() { var amount_val = parseFloat($(this).find('.amount').val()); var vat_val = parseFloat($(this).find('.vat_calc').val()); var vat_amount = amount_val * vat_val; $(this).find('.vat_amount').val(parseFloat(vat_amount)); total_vat += parseFloat(vat_amount); total += amount_val + vat_amount; });

Answer 2

您可以通过以下方式添加动态输入的值：

 $("#add").click(function(){ $("#content").append("<input type='text' value=0 class='data' />"); }) $(document).on('change',".data",function(){ var total = 0; $(".data").each(function(){ total += parseFloat($(this).val()); }) $("#total").html(total); });

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> </head> <body> <div id="content"> </div> <div id="total" style="width=100px;height:20px;background-color:#cbcbcb"> </div> <button id="add" style="width:100px;height:20px">Add Input</button> </body> </html>

jquery - 从动态创建的元素中获取总和

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-10-06 11:44:13

解决方案2
0 2017-10-06 10:51:31

jquery - 从动态创建的元素中获取总和

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-10-06 11:44:13

解决方案2 0 2017-10-06 10:51:31

解决方案1
1 已采纳 2017-10-06 11:44:13

解决方案2
0 2017-10-06 10:51:31