javascript 如何动态计算HTML页面上表格中每列的总数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15373043/
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
How to dynamically calculate the total of each column in a table on an HTML page?
提问by user2162925
I will basically have a table with days of the week (header row across). Column 1-Sunday, Column 2-Monday, etc. Each cell will be entered with hours worked, i.e., 8.
The last row I want each cell to dynamically calculate the total of the cells above it in its column, after the data is entered into each cell. Ideally, this should be calculated after moving the cursor to a different cell.
我基本上会有一个包含一周中几天的表格（标题行）。第 1 列-周日、第 2 列-周一等。每个单元格都将输入工作时间，即8。最后一行我希望每个单元格在将数据输入到每个单元格后动态计算其列中其上方单元格的总数。理想情况下，这应该在将光标移动到不同的单元格后计算。
It seems like I should use some JavaScript for this. But I can't write JavaScript from scratch; I can only tweak it to what I need after it's been written.
似乎我应该为此使用一些 JavaScript。但是我不能从头开始编写 JavaScript；我只能在写完后将其调整为我需要的。
For our purposes here's a basic table. I'll put examples in Column 1.
出于我们的目的，这里有一个基本表格。我将在第 1 列中放置示例。
<table id="workweek" class="wwtable">
<tr><th>sunday</th><th>monday</th><th>tuesday</th><th>wednesday</th><th>thursday</th><th>friday</th><th>saturday</th></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>8 </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td>(Calculate 40 here) </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>
Forgot to mention. Each cell will have the user input the hours for each day, so there will be input fields in each cell.
忘记提了。每个单元格都会让用户输入每天的小时数，因此每个单元格中都会有输入字段。
回答by Yannick Blondeau
If jQuery is a viable option for you, you can iterate through all tdin a given column like this:
如果 jQuery 对您来说是一个可行的选择，您可以td像这样遍历给定列中的所有内容：
$('#workweek>tbody>tr>td:nth-child(1)').each( function(){
sum += parseInt($(this).text()) || 0;
});
I've put together a working example for you on jsFiddle:
我在 jsFiddle 上为你整理了一个工作示例：
for (var i=1; i<8; i++)
{
var sum = 0;
// iteration through all td's in the column
$('#workweek>tbody>tr>td:nth-child(' + i + ')').each( function(){
sum += parseInt($(this).text()) || 0;
});
// set total in last cell of the column
$('#workweek>tbody>tr>td:nth-child(' + i + ')').last().html(sum);
}
Be aware that this example will erase the content of the last cell of the column if it's not empty.
请注意，如果该列的最后一个单元格不为空，则此示例将删除该列的最后一个单元格的内容。
回答by ktm5124
You can loop through the DOM of the table, and get the textContentor innerTextof each cell as the value in hours.
您可以遍历表格的 DOM，并以小时为单位获取每个单元格的textContentorinnerText值。
This is a popular way to do it:
这是一种流行的方法：
function strip(html) {
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent||tmp.innerText;
}
Then (something like this): Working example: http://jsfiddle.net/7srJf/3/
然后（类似这样）：工作示例：http: //jsfiddle.net/7srJf/3/
var tbl = document.getElementById('my-table');
var rows = tbl.rows;
var DAYS_OF_WEEK = 2, totals = [0, 0];
for (var i = 0; i < DAYS_OF_WEEK; i++) {
for (var j = 1; j < rows.length; j++) {
var cell = rows[j].cells[i];
var numHours = parseInt(strip(cell.innerHTML), 10);
totals[i] += numHours;
}
}
