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);

DEMO

Answer 2

好的，所以你的代码有各种各样的问题（我认为横向是错误的，而且你正在增加而不是添加，而你没有检查不是数字/ NaN），我将要解决尽我所能。

组织的层叠风格很难阅读。使用变量可以更容易阅读和调试。如您所见，我使用一个var声明声明了多个变量。使用var。它使变量成为局部变量而不是全局变量，因此您可以在其他地方定义sum而不会弄乱原始函数。

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

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

如果0不是整数，则返回qty。这很重要，否则它会假设输入是字符串，并附加一个，而不是将它们加在一起。

我还强烈建议您避免使用$("[id^=saved]")等标记。按属性选择可能非常昂贵/缓慢。不要马上担心，但你看到我如何避免使用下面的选择器。您通常希望使用id，class，tag或variable作为选择器。

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);

Working fiddle

Answer 3

JSBIN

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);

来自表的Jquery输入总和

3 个答案: