Question

我有一个表格，每个单元格中都有输入，除了一个（.total），它指定了每个表格行的总和。当其中一个输入被更改时，我希望该行的总和发生变化。以下是我能够得到的。 HTML：

<table>
   <tr>
      <td><input value = "100"/></td>
      <td><input value = "100"/></td>
      <td><input value = "100"/></td>
      <td class="total">300</td>
   </tr>
   <tr>
      <td><input value = "200"/></td>
      <td><input value = "200"/></td>
      <td><input value = "200"/></td>
      <td class="total">600</td>
   </tr>
</table>

现在为jQuery：

    //add keyup handler
    $(document).ready(function(){
        $("input").each(function() {
            $(this).keyup(function(){
                newSum();
            });
        });
    });

    function newSum() {
        var sum = 0;
        var thisRow = $(this).closest('tr');

        //iterate through each input and add to sum
        $(thisRow).("td:not(.total) input:text").each(function() {
                sum += this.value;            
        });

        //change value of total
        $(thisRow).(".total").html(sum);
    }

任何有助于找出我做错了什么的帮助都将不胜感激。谢谢！

Answer 1

您的主要问题是在您的函数中使用this。如果将该函数的主体直接放在keyup处理程序中，它应该可以工作。但是，单独声明的函数体中的this本质上将指的是它是一个方法的对象。在上面的例子中，该对象将是window。

试试这个：

$(document).ready(function(){
    $("input").each(function() {
        var that = this; // fix a reference to the <input> element selected
        $(this).keyup(function(){
            newSum.call(that); // pass in a context for newsum():
                               // call() redefines what "this" means
                               // so newSum() sees 'this' as the <input> element
        });
    });
});

newSum()中还有一些表面错误：

function newSum() {
  var sum = 0;
  var thisRow = $(this).closest('tr');

  thisRow.find('td:not(.total) input:text').each( function(){
    sum += parseFloat(this.value); // or parseInt(this.value,10) if appropriate
  });

  thisRow.find('td.total input:text').val(sum); // It is an <input>, right?
}

Answer 2

我可以找到一些问题和改进

求和文本值将连接所有输入值，而不是数值。您必须使用例如将文本值转换为数字。 parseInt或parseFloat。
$(this).closest('tr')不会返回一组。如果从事件处理程序传递事件对象，则可以将其更改为$(event.target).closest('tr')。原因是this在默认上下文中计算，而不是在事件的上下文中。
您应该使用onchange事件而不是onkeyup事件：不需要使用不完整的信息更新总和。
您可以使用$(selector).keyup(function() {})绑定活动，但不需要使用.each功能。
如果在定义函数之前使用函数，JSLint会发出警告。
td:not(.total) input:text在当前上下文中有点具体 - 可以简化。

带有一些修改的解决方案

function newSum(event) {
    var sum = 0;
    var thisRow = $(event.target).closest('tr');
    thisRow.find("td input").each(function() {
        sum += parseInt(this.value);
    });


    thisRow.find(".total").html(sum);
}

$("input").change(function(event) {
    newSum(event);
});

如果newSum函数不必了解上下文，那么组合可能会更好。

function sumInputsIn(inputs) {
    var sum = 0;
    inputs.each(function() {
        sum += parseInt(this.value, 10);
    });
    return sum;
}

$("input").change(function(event) {
    var row = $(event.target).closest('tr');
    row.find('.total').html(sumInputsIn(row.find('td input')));
});

Answer 3

以下问题应该解决一些问题。

使用错误的上下文调用newSum（默认窗口上下文，而不是DOM对象的上下文）
使用无效的选择器来查找输入字段
除非您使用parseInt

代码：

//add keyup handler
$(document).ready(function(){
    $("input").each(function() {
        $(this).keyup(function(){
            newSum.call(this);
        });
    });
});

function newSum() {
    var sum = 0;
    var thisRow = $(this).closest('tr');
    //iterate through each input and add to sum
    $(thisRow).find("td:not(.total) input").each(function() {
            sum += parseInt(this.value);    
    });

    //change value of total
    $(thisRow).find(".total").html(sum);
}

Answer 4

$(document).ready(function(){  
    $("input").keyup(function(){
        var suma = 0; 
        $(this).parents("tr").children("td").children().each(function(){
            suma+= parseInt($(this).val());
        });
        $(this).parent().parent().children(":last").text(suma);
    });
});

JQuery将特定表行中的所有数据相加

4 个答案: