Question

好的，我有一张为我的帐单动态构建的表格。我想要将每个金额加在一起并将它们放在一个总计中。

我有以下代码来计算总数：

$('.amount').blur(function () {
   var total = 0;

   $('.amount').each(function () {
       total += $(this).val();
   });

   $('.total_bills').html(total);
});

但它似乎根本没有做任何事情。它似乎甚至没有被调用。我的表结构如下：

 <table class="table" id="myTable">
    <thead>
        <tr>
            <th class="text-center">Bill Name</th>
            <th class="text-center">Bill Amount</th>
            <th class="text-center">Status</th>
        </tr>
    </thead>
    <tbody>

    <tr><td class="text-center"><input type="text" name="bill_name[]" class="form-control"></td><td class="text-center"><input type="text" name="bill_amount[]" class="form-control amount"></td><td class="text-center"><input type="text" name="bill_status[]" class="form-control"></td></tr><tr><td class="text-center"><input type="text" name="bill_name[]" class="form-control"></td><td class="text-center"><input type="text" name="bill_amount[]" class="form-control amount"></td><td class="text-center"><input type="text" name="bill_status[]" class="form-control"></td></tr><tr><td class="text-center"><input type="text" name="bill_name[]" class="form-control"></td><td class="text-center"><input type="text" name="bill_amount[]" class="form-control amount"></td><td class="text-center"><input type="text" name="bill_status[]" class="form-control"></td></tr></tbody>
</table>

我还在这里创建了一个JSFiddle：http://jsfiddle.net/ux0rsk2q/

Answer 1

问题是.amount是动态创建的，因此您需要将模糊事件委托给它： DEMO

function add(user) {
    $("#" + user + "Table tbody").append(
        "<tr>" +
        "<td class='text-center'><input type='text' name='bill_name[]' class='form-control'></td>" +
        "<td class='text-center'><input type='text' name='bill_amount[]' class='form-control amount'></td>" +
        "<td class='text-center'><input type='text' name='bill_status[]' class='form-control'></td>" +
        "</tr>");
}

$(".addBill").click(function () {
    var user = $(this).data('user');
    add(user);
});

$(document).on('blur','.amount',function () {
    var total = 0;

    $('.amount').each(function () {
        total += parseInt($(this).val());
    });

    $('.total_bills').html(total);
});

还可以添加您需要使用parseInt()的实际金额，以确保添加的数字不是附加的字符串。

<强>更新

这是区分表格及其字段的最佳方式：

$(document).on('blur','.amount',function () {
    var total = 0;

    $(this).closest('tr').find('.amount').each(function () {
        total += parseInt($(this).val());
    });

    $(this).closest('tr').find('.total_bills').html(total);
});

更新2：

在这里： DEMO

function add(user) {
    $("#" + user + "Table tbody").append(
        "<tr>" +
        "<td class='text-center'><input type='text' name='bill_name[]' class='form-control'></td>" +
        "<td class='text-center'><input type='text' name='bill_amount[]' class='form-control amount'></td>" +
        "<td class='text-center'><input type='text' name='bill_status[]' class='form-control'></td>" +
        "</tr>");
}

$(".addBill").click(function () {
    var user = $(this).data('user');
    add(user);
});

$(document).on('blur','.amount',function () {
    var total = 0;

    $(this).closest('tbody').find('.amount').each(function () {
        total += parseInt($(this).val());
    });

    $(this).closest('table').next().find('.total_bills').html(total);
});

Answer 2

在页面加载后，您的ammount jQuery仅被调用一次。目前，没有ammount个元素。添加新行时，不会自动调用它，因此不会添加模糊功能。你必须自己打电话：

http://jsfiddle.net/darekkay/ux0rsk2q/1/

Answer 3

试试这种方式。

 $('.amount').live('change', function() {
    var arr = document.getElementsByName('bill_amount[]');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total_bills').value = tot;
});

Answer 4

由于委派的jQuery事件（例如.live和.on [带有适当的参数]）会对性能产生影响，我会将监听器添加到上层元素并测试目标。由于可能存在空行，因此请将默认值设置为零$(this).val()) || 0。转换为Number，而不是整数，因为您需要分值。将结果修复为点后的两位数。

$('#myTable').change(function (ev)
{
  if (ev.target.classList.contains('amount'))
  {
    var total = 0;

    $('.amount').each(function ()
    { total += Number($(this).val()) || 0;
    });

    $('.total_bills').html(total.toFixed(2));
  }
});

现场测试：http://jsfiddle.net/ux0rsk2q/10/

编辑：或更多jQuery风格：if ($(ev.target).hasClass('amount'))

计算表中每个输入的JavaScript总计

4 个答案: