Question

我有一系列带有以下ID的文本框：

118|1/9/2011
118|1/10/2011
118|1/11/2011
118|1/12/2011
118|1/13/2011
118|1/14/2011
118|1/15/2011
118|Total

使用jQuery或只是javascript，我需要对每个文本框求和并将值分配给总文本框。这需要在用户选中或点击文本框时发生。它还需要足够通用以处理具有类似ID的文本框，例如：

119|1/9/2011
119|1/10/2011
119|1/11/2011
119|1/12/2011
119|1/13/2011
119|1/14/2011
119|1/15/2011
119|Total

格式保持不变。只有|左边的第一个数字会改变。

非常感谢任何指导。

Answer 1

编辑：我更新了我的回答，以反映Mike提供的实际示例HTML，您可以在this fiddle中查看。该链接还包含来自下方的工作javascript。

如果你有一个特定的选择器用于你想要求和的输入（比如一个类名），以及一个总数的选择器，你应该能够做到这一点（这里有一个关于这个javascript的小提琴链接：{ {3}}）：

$('input.sum').change(function() {
    var sum = 0;

    // we want to sum up the values of all input.sum elements that are in the same tr
    // as this one
    $(this).closest('tr').find('input.sum').each(function(i) {
        var val = parseInt($(this).val(), 10);
        /*
        change the above line to:
        var val = parseFloat($(this).val());
        if the inputs will be floats
        */
        if (isNaN(val) || val === undefined) {
            return;
        }

        sum += val;
    });

    $(this).closest('tr').find('input.total').val(sum);

});

需要注意的重要事项是http://jsfiddle.net/avidal/zfjmD/函数和.closest()函数。

首先，我们使用一个sum类绑定所有输入的change事件。当其中一个元素发生更改（值更改，然后用户点击/标签输出）时，我们会查找closest tr元素，然后find一个类的输入列表总和是tr的孩子。对于这些输入中的each，我们会解析该值并累积sum。在我们迭代了each个输入之后，我们终于找到了一个总数为最接近的tr的后代的输入，并将该输入的val设置为累积的{{1} }}

完美！

Answer 2

很棒的问题和很棒的答案！这很完美！为了回答Mike，我在jQuery中将'tr'更改为'table'，它总计了几个tr和td中表中的所有总和。只要输入具有class =“sum”，它们就会被合计。

jQuery：文本框中的总值自动

2 个答案: