如何动态地计算总的每一列的表的HTML页面上？(How to dynamically calcula

我基本上都会有一周的天表（标题行对面）。 列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>

忘了提。 每个小区将具有用户输入的时间的每一天，所以会有在每个小区中的输入字段。

Answer 1:

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

请注意，这个例子将删除列的最后一个单元格的内容，如果它不是空的。

Answer 2:

您可以通过表的DOM循环，并获得textContent或innerText每个单元在时间的价值。

这是做它的流行方式：

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

文章来源: How to dynamically calculate the total of each column in a table on an HTML page?