2

我基本上会有一个包含一周中几天的表格（跨标题行）。第 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>

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

4

2 回答 2

4

如果 jQuery 对您来说是一个可行的选择，您可以像这样遍历td给定列中的所有内容：

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

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

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

于 2013-03-12T22:38:35.923 回答
2

您可以遍历表格的 DOM，并获取每个单元格的textContentorinnerText作为小时值。

这是一种流行的方法：

function strip(html) {
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent||tmp.innerText;
}

然后（类似这样）：工作示例：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;
    }
}
于 2013-03-12T22:32:09.033 回答