Question

我有多个同名文字字段。

当有人在其中一个文本字段中键入数字时。它应该在Sum Textfield中显示运行时的总和。

任何人都可以帮助我吗？

我有这个HTML：

<table width="400" border="1" cellspacing="0">
  <tr>
    <td colspan="2" align="center">
    SUM: 
    <input type="text" name="sum" id="sum" /></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield" id="field_1" /></td>
    <td><input type="text" name="textfield" id="field_2" /></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield" id="field_3" /></td>
    <td><input type="text" name="textfield" id="field_4" /></td>
  </tr>
</table>

这是我的小提琴：

http://jsfiddle.net/36Yhe/1/

Answer 1

使用vanilla JavaScript可以这样做：

(function () {
    var textFields = document.getElementsByName('textfield');

    sum = function() {
        var sum = 0;

        for (var i = 0; i < textFields.length; i++) {
            var val = textFields[i].value;
            if (parseFloat(val) == val) {
                sum += parseFloat(val);
            }
        }
        document.getElementById('sum').value = sum;
    };

    document.getElementById('sum-table').addEventListener("keyup", sum, false);

    sum();
})();

JSFiddle

此外，您的元素 ID 应该是唯一的，因为名称可以相同。我已经在上面提到了这一点。

使用更新的小提琴进行编辑，以包含@bfontaine建议的更改

Answer 2

试试这个：

// selects all inputs but "#sum"
var inputs = $('input:not(#sum)');
// each time the user releases a key
inputs.keyup(function () {
    var sum = 0;
    // loops through every inputs
    inputs.each(function () {
        // parses input's value into a float
        // if parsing fails uses 0 instead of NaN (NaN || 0)
        sum += parseFloat($(this).val()) || 0;
    });
    // displays the result
    $('#sum').val(sum);
});

以下是演示：http://jsfiddle.net/wared/8K24v/。

另一个（扭曲的）解决方案：

var inputs = $('input:not(#sum)');
inputs.keyup(function () {
    $('#sum').val(new Function('return ' + inputs.map(function () {
        return parseFloat($(this).val()) || 0;
    }).get().join('+') + ';')());
});

它的（扭曲的）演示：http://jsfiddle.net/wared/sraV3/。

让我们展开扭曲的部分：

inputs.map(...).get()：将jQuery输入列表转换为数字数组。
.join('+')：将数字数组转换为字符串。示例：[1,2].join('+')提供"1+2"。
new Function('return ...;')()：创建一个新函数并立即执行。此时我们有类似的内容：new Function('return 1+1+1+1;')()（将此代码评估到浏览器控制台，输出显然是数字4）。
最后，此函数的结果将传递给$('#sum').val(...)。

其他内容：

使用javascript在运行时在数组中执行多个文本字段的总和

2 个答案: