如何动态计算HTML页面中表格中每列的总数？ [英] How to dynamically calculate the total of each column in a table on an HTML page?

问题描述

我基本上有一个星期几的表格（标题行横跨）。 第1列 - 星期天，第2列 - 星期一等。每个单元格将输入工作小时数，即 8 。
在数据输入到每个单元格后，我希望每个单元格的最后一行动态计算其列中单元格的总数。理想情况下，应该在将光标移动到不同的单元格后计算它。

好像我应该为此使用一些JavaScript。但我无法从头开始编写JavaScript;我只能在写完之后将其调整为我所需要的。

对于我们的目的，这是一个基本表格。我将在第1栏中添加示例。

 < table id =workweekclass =wwtable> 
 th th th th th th th th th th th th th th th th th th th th th th th th th th warts-day th th th th th th th th th th th th th th th th th th th th th th th th th th th th th th th th we th th th th th th th th we th th th th th th th th th th th th we thth th th th th th th th th th I th /第><的第i;周五< /第><的第i;周六和LT; /第>< / 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>（此处计算40）< / td>< td> < / TD>< TD> < / TD>< TD> < / TD>< TD> < / TD>< TD> < / TD>< TD> < / TD>< / TR> 
< / table> 
  

忘了提及。每个单元格将有用户输入每天的小时数，所以每个单元格中都会有输入字段。

如果jQuery对于你来说是一个可行的选择，你可以遍历给定列中的所有 td ，如下所示：

 $（'＃workweek> tbody> tr> td：nth-​​child（1）'） ））|| 0; 
}）; 
  

我已经为您制作了一个工作示例 on jsFiddle ：

  for（var i = 1 ; i <8; i ++）
 {
 var sum = 0; 
 
 //遍历列中的所有td 
 $（'＃workweek> tbody> tr> td：nth-​​child（'+ i +'）'）。each（function ）{
 sum + = parseInt（$（this）.text（））|| 0; 
}）; 
 
 //在列的最后一个单元格中设置总数
 $（'＃workweek> tbody> tr> td：nth-​​child（'+ i +'）'）。last html的（总和）; 
} 
  

请注意，此示例将清除列中最后一个单元格的内容如果它不是空的。

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.

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.

For our purposes here's a basic table. I'll put examples in Column 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.

解决方案

If jQuery is a viable option for you, you can iterate through all td in a given column like this:

$('#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:

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.

这篇关于如何动态计算HTML页面中表格中每列的总数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！