jQuery:文本框中的总值自动生成

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

编辑:我更新了我的答案,以反映迈克提供的实际示例HTML,您可以在这个小提琴中查看.该链接还包含来自下方的工作javascript.

如果你有一个特定的选择器用于你想要求和的输入(比如一个类名),以及一个总数的选择器,你应该能够做到这一点(这里有一个关于这个javascript的小提琴链接:http:// jsfiddle.net/avidal/zfjmD/):

$('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);

});

需要注意的重要事项是.closest()功能和.find()功能.

首先,我们change使用一类sum 绑定所有输入的事件.当其中一个元素发生变化时(值发生变化,然后用户点击/标签输出),我们会查找closest tr元素,然后查找find输入列表,其中包含一个总和类别的输入tr.对于each那些输入,我们解析值并累积sum.在我们迭代了each那些输入之后,我们终于找到了一个总类的输入,它是最接近的tr的后代,并将val该输入设置为累积sum

完善!