Jquery表中输入的总和

Jquery sum of inputs from table

本文关键字：输入 Jquery      更新时间：2023-09-26

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

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

有什么想法吗？

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

演示

好吧，所以你的代码有很多问题（我认为横向错误，你在乘法而不是加法，你没有检查不是数字/NaN），我会尽可能多地解决。

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

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

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

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

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

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

工作小提琴

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);
相关文章：