javascript - 使用 javascript 计算单独总和的问题

Question

我的 JavaScript 代码有问题。我试图为每个“零售”、“治疗”、“新客户”和“保留”分别计算总和。当我乱搞添加“.txt、.txt2等”的类时，它仍然只在顶部字段中求和。

这是代码

$(document).ready(function(){
    $(".txt, .txt2, .txt3, .txt4").each(function() {
        $(this).keyup(function(){
            calculateSum();
        });
    });
});

function calculateSum() {
    var sum = 0;
    $(".txt, .txt2, .txt3, .txt4").each(function() {
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $("#sum").val(sum);
}

这是该应用程序的链接 http://jsfiddle.net/veL6K/

如果这没有意义，我会尝试澄清。

Answer 1

我建议从头开始。您的标记有点困惑，jsfiddle 显示了一些错误。我会从一个简单的表格开始，然后从那里开始。

采用此标记:

<table class="table-sum" border="1">
  <tr><th>A</th><th>B</th><th>C</th><th>D</th><th>Result</th></tr>
  <tr>
    <td><input class="qty" type="text"></td>
    <td><input class="qty" type="text"></td>
    <td><input class="qty" type="text"></td>
    <td><input class="qty" type="text"></td>
    <td><input class="result" type="text" disabled></td>
  </tr>
  <tr>
    <td><input class="qty" type="text"></td>
    <td><input class="qty" type="text"></td>
    <td><input class="qty" type="text"></td>
    <td><input class="qty" type="text"></td>
    <td><input class="result" type="text" disabled></td>
  </tr>
</table>

您只需要一个用于数量输入的类和一个用于结果输入的类。这就是类的目的，即可重用性。

JavaScript 代码并不多，无法处理此逻辑。使用 jQuery，我们找到与当前元素相关的所需元素，计算总和并更新结果:

function calculateSum() {
  var $cells = $(this).parent().siblings();
  var $inputs = $cells.find('.qty').add(this);
  var sum = $inputs.toArray().reduce(function(a,e) {
    return a + Number(e.value);
  }, 0);
  if (!isNaN(sum)) {
    $cells.find('.result').val(sum);
  }
}

$('.qty').keyup(calculateSum);

演示: http://jsbin.com/tatigevi/2/edit