jQuery来自表的输入总和

Question

我试图从表中获取输入的总和。 目前我有：

HTML：

<tr id='saved1'>
<td><input class='qty'/></td>
<td><input class='price'/></td>
<td><input class='subtotal'/></td>
</tr>

jQuery：

//COUNT ALL FIELDS
function calculateSum() {
  $("[id^=saved]").each(function() {
    sum = $(this).parent().parent().find('.qty').val() * $(this).parent().parent().find('.price').val();
  $(this).parent().parent().find('.subtotal').val(sum);
    });
  }

// On change
$("input").change(calculateSum);

有任何想法吗？

Answer 1

您的DOM遍历是错误的。 您不需要上父母，只需要查找该行中的元素。

function calculateSum() {
    $("[id^=saved]").each(function() {
        var sum = $(this).find('.qty').val() * $(this).find('.price').val();
        if (!isNaN(sum)) {
            $(this).find('.subtotal').val(sum);
        }
    });
}

如果行是动态添加的，则需要使用事件委托进行绑定：

$("#tableID").on('change', 'input', calculateSum);

演示

Answer 2

好的，所以您的代码有各种各样的问题（我相信横向运算是错误的，您正在乘法而不是加法，并且您不检查非数字/ NaN），并且我将解决尽可能多的问题。我可以。

级联的组织风格很难理解。 使用变量可以更容易阅读和调试。 如您所见，我用一个var声明声明了多个变量。 使用var 。 它使变量成为局部变量，而不是全局变量，因此您可以在其他位置定义sum而不用弄乱原始功能。

您还可以尝试将2个未经检查的输入加在一起。 如您所见，我正在使用按位运算符：

qty = grandparent.find('.qty').val() | 0,

如果qty不是整数，则返回0 。 这很重要，否则它将假定输入为字符串，然后追加一个，而不是将它们加在一起。

我也强烈建议您避免使用诸如$("[id^=saved]")标签。 按属性选择可能非常昂贵/缓慢。 不必担心，但是您会在下面看到如何避免使用该选择器。 您通常希望使用id，class，tag或变量作为选择器。

function calculateSum() {
    var $this = $(this),
        grandparent = $(this).parent().parent(),
        qty = grandparent.find('.qty').val() | 0,
        price = grandparent.find('.price').val() | 0,
        sum = qty + price;
    $('.subtotal').val(sum);
}

// On change
$("input").change(calculateSum);

工作提琴

Answer 3

吉宾

function foo(){
    foo.total += $(this).val() - 0;
}
function calcField(selector){
    foo.total = 0;
    $(selector).each(foo)
    $(selector+'total').val(foo.total);
}
function calcFields(){
    var fields = [".qty",".price",".subtotal"];
    for(var i in fields){
        calcField(fields[i]);
    }
}
$('button').on('click',calcFields);