如何动态计算HTML页面表格中每一列的总计？

我基本上会有一个表格，其中包含一周中的几天（标题行交叉）。第 1 栏-周日, 第 2 栏-周一等。每个单元格将输入工作时间，即8。 最后一行，我希望每个单元格在将数据输入到每个单元格后动态计算其列中其上方单元格的总数。理想情况下，应在将光标移动到不同的单元格后计算该值。

看来我应该为此使用一些 JavaScript。但我无法从头开始编写 JavaScript；我只能在写完后根据需要进行调整。

出于我们的目的，这里有一个基本表格。我将举一些例子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>

忘记说了。每个单元格将让用户输入每天的小时数，因此每个单元格中都会有输入字段。

如果 jQuery 对您来说是一个可行的选择，您可以迭代所有td在给定的列中，如下所示：

$('#workweek>tbody>tr>td:nth-child(1)').each( function(){
    sum += parseInt($(this).text()) || 0;
});

我为你整理了一个工作示例在 jsFiddle 上 http://jsfiddle.net/5S4Nd/2/:

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);
}

请注意，如果该列的最后一个单元格不为空，则此示例将删除该单元格的内容。