gpt4 book ai didi

javascript - 如何在HTML页面上动态计算表格中每一列的总数?

转载 作者:太空宇宙 更新时间:2023-11-04 14:41:32 24 4
gpt4 key购买 nike

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

看来我应该为此使用一些 JavaScript。但是我不能从头开始写 JavaScript;我只能在编写完成后根据需要调整它。

为了我们的目的,这里有一个基本表格。我将在第 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;
});

我为您整理了一个工作示例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);
}

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

关于javascript - 如何在HTML页面上动态计算表格中每一列的总数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15373043/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com