javascript JQuery 汇总特定表行中的所有数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5215185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery sum all data in specific table row
提问by groc426
I have a table with inputs in each cell, except one (.total) which specifies the total of each table row. When one of the inputs are changed I would like the sum to change for that row. Below is far as I have been able to get. The HTML:
我有一个表格，每个单元格都有输入，除了一个 (.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>
Now for the jQuery:
现在对于 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);
}
Any help in finding out what I've done wrong will be greatly appreciated. Thanks!
任何帮助找出我做错了什么都将不胜感激。谢谢！
采纳答案by Ken Redler
Your main problem is the use of thisin your function. If you place the body of that function directly in the keyuphandler, it should work. But thisin the body of a separately declared function will refer, essentially, to the object of which it is a method. And that object, in the case above, would be window.
您的主要问题是this在您的功能中使用。如果您将该函数的主体直接放在keyup处理程序中，它应该可以工作。但是this在一个单独声明的函数的主体中，本质上，它是一个方法的对象。在上述情况下，该对象将是window.
Try this:
试试这个：
$(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
});
});
});
You also have some more superficial errors in newSum():
您在以下方面也有一些更肤浅的错误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?
}
回答by Aleksi Yrttiaho
I can find a couple of problems and improvements
我可以找到一些问题和改进
- summing text values will concatenate all the input values, not the numeric values. You have to cast the text value to a number using e.g.
parseIntorparseFloat. $(this).closest('tr')doesn't return a set. You can change this to$(event.target).closest('tr')if you pass the event object from the event handler. The reason for this is thatthisis evaluated in the default context not in the context of the event.- You should probably use the onchange event instead of onkeyup event: There is no need to update the sum with incomplete information.
- You can bind the event using
$(selector).keyup(function() {}), you don't need to use the.eachfunction. - JSLint will warn you if you use a function before defining it.
td:not(.total) input:textis a bit specific in the current context - it can be simplified.
- 对文本值求和将连接所有输入值，而不是数字值。您必须使用 eg
parseInt或将文本值转换为数字parseFloat。 $(this).closest('tr')不返回集合。$(event.target).closest('tr')如果您从事件处理程序传递事件对象，则可以将其更改为。原因是它this是在默认上下文中而不是在事件上下文中进行评估的。- 您可能应该使用 onchange 事件而不是 onkeyup 事件：没有必要用不完整的信息更新总和。
- 您可以使用 绑定事件
$(selector).keyup(function() {})，您不需要使用该.each函数。 - 如果您在定义一个函数之前使用它，JSLint 会警告您。
td:not(.total) input:text在当前上下文中有点特定 - 它可以简化。
Solution with some modifications
有一些修改的解决方案
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);
});
The composition might be better if the newSum-function didn't have to know about the context as much e.g.
如果 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')));
});
回答by Ben Regenspan
There are a few things wrong that the below should resolve.
下面应该解决一些错误的问题。
- newSum is called with the wrong context (the default window context, not the context of the DOM object)
- an invalid selector is used to find the input fields
- the values you're summing will be treated as text unless you use parseInt
- 使用错误的上下文调用 newSum（默认窗口上下文，而不是 DOM 对象的上下文）
- 无效的选择器用于查找输入字段
- 除非您使用 parseInt，否则您求和的值将被视为文本
Code:
代码：
//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);
}
回答by Joseadrian
$(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);
});
});
