Question

我在表格中有多行，看起来像这样。

<tr>
<td>Item 1</td>
<td><input type=TEXT name="item_name[]"  /></td>
<td><input type=TEXT name="item_desc[]"  /></td>
<td><input type=TEXT name="item_type[]"  /></td>
<td><input type=TEXT name="item_price[]" /></td>
<td><input type=TEXT name="item_setup[]" /></td>
<td><input type=TEXT name="item_quant[]" /></td>
</tr>

等...

用户可以动态添加更多行或删除它们。

我正在尝试制作JS部分，它将显示所有item_price * item_quant的总和，并在keyup上显示它或模糊或更改。

<tr><td id=total></td></tr>

编辑：到目前为止尝试了以下内容。为每个调用下面的updateTotal（）的字段添加了一个“onblur”：

function updateTotal() {
var total = 0; 

$("input[id^='item_quant[']").each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
        total += parseFloat(this.value);
    }
});

$("#total").val(total);
}

但仍然没有去

Answer 1

尝试

$('table').on('change', 'input[name="item_price[]"], input[name="item_quant[]"]', function() {
    var total = 0;
    $('table').find('tr').each(function() {
        var $this = $(this);
        var amount = (parseFloat($this.find('input[name="item_price[]"]').val(), 10) || 0)
        * (parseFloat($this.find('input[name="item_quant[]"]').val(), 10) || 0);
        total += amount;
    })

    $('#total').text(total)
})

演示：Fiddle

Answer 2

您可以通过将每个元素值转换为整数然后执行求和算法来完成此操作。

示例

var add = 0; $("input").each(function() { add += Number($(this).val());//for integer //add += parseFloat($(this).val());//for float or decimal }); $("#total").html("Sum of all textboxes is : " + add);

Answer 3

 $(".txt").each(function () {

         //add only if the value is number
         if (!isNaN(this.value) && this.value.length != 0) {
             sum += parseFloat(this.value);
         }

     });

<强> JSFIDDLE DEMO

从输入数组的元素中求和

3 个答案: