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

Answer 2

$(document).ready(function(){
    $(".txt, .txt2, .txt3, .txt4").each(function() {
        $(this).keyup(function(){
            calculateSum($(this).attr("class")); // passing current class name to the function
        });
    });
});

function calculateSum(cls) {
    var sum = 0;
    $("." + cls).each(function() { // here specifying current class name
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $("#sum" + cls.substr(3,4)).val(sum); // based on class name changing result id
}

JSFiddle看看

注意：您只是指定了一个当前txt字段和一个当前sum（结果）ID，您应该像我发布的那样

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

2 个答案: