JQuery总结特定表行中的所有数据

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

我能找到一对夫妇的问题及改进措施

1. 总结文本值将串连所有的输入值，而不是数值。您必须使用例如文本将文本值转换为数字。 parseInt或parseFloat。
2. $(this).closest('tr')不返回一组。如果您从事件处理程序传递事件对象，则可以将其更改为$(event.target).closest('tr')。原因在于this在默认上下文中不在事件上下文中进行评估。
3. 您应该使用onchange事件而不是onkeyup事件：没有必要使用不完整的信息更新总和。
4. 您可以使用$(selector).keyup(function() {})绑定事件，您不需要使用.each函数。
5. 如果您在定义函数之前使用函数，JSLint会发出警告。
6. 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

以下几点应该解决的问题有几点。

1. newSum被称为与
2. 无效选择用于查找输入字段
3. 你总结意志值错误的情况下（默认的窗口背景，而不是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); 
    }); 
});