如何動態計算HTML頁面中表格中每列的總數？

我將基本上有一個星期幾的表（橫跨標題行）。 第1列 - 星期日,第2列 - 星期一等。每個單元格將輸入工作小時數，即8。最後一行我希望每個單元格在其數據輸入到每個單元格後，動態計算其列中上方單元格的總數。理想情況下，應該在將光標移動到不同的單元格後進行計算。如何動態計算HTML頁面中表格中每列的總數？

看來我應該爲此使用一些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>

忘了提。每個單元格將使用戶輸入每天的小時數，因此每個單元格中都會有輸入字段。

來源

2013-03-12 user2162925

您可以遍歷表格的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; 
    } 
}

來源

2013-03-12 22:32:09 ktm5124

我忘了補充一點，表格中的每個單元格都將由用戶輸入，因此需要一種在離開單元格後計算的方法 – user2162925 2013-03-22 21:58:59

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

注意，這個例子將刪除列的最後一個單元格的內容，如果它不是空的。

來源

2013-03-12 22:38:35

如何動態計算HTML頁面中表格中每列的總數？

回答

相關問題