將HTML表格行與Javascript結合使用

是否有一種簡單的方法可以將HTML表中第一列相同的行組合起來？我基本上是有一個表設置，如：將HTML表格行與Javascript結合使用

<table> 
<tr><td>test</td><td>12345</td><td>12345</td><tr> 
<tr><td>test</td><td>12345</td><td>12345</td><tr> 
<tr><td>test2</td><td>12345</td><td>12345</td><tr> 
<tr><td>test</td><td>12345</td><td>12345</td><tr> 
<tr><td>test2</td><td>12345</td><td>12345</td><tr> 
</table>

，我希望它產生：

<table> 
<tr><td>test</td><td>37035</td><td>37035</td><tr> 
<tr><td>test2</td><td>24690</td><td>24690</td><tr> 
</table>

來源

2011-06-02 bmbaeb

它從哪裏產生？向我們展示代碼。 – patapizza 2011-06-02 19:56:38

使用jQuery：

var map = {}; 
$('table tr').each(function(){ 
    var $tr = $(this), 
     cells = $tr.find('td'), 
    mapTxt = cells.eq(0).text(); 

    if(!map[mapTxt]){ 
     map[mapTxt] = cells; 
    } else { 
     for(var i=1, l=cells.length; i<l; i++){ 
      var cell = map[mapTxt].eq(i); 
      cell.text(parseInt(cell.text()) + parseInt(cells[i].text())); 
     } 
     $tr.remove(); 
    } 
});

這是一個「愚蠢」的劇本 - 不是錯誤處理的情況下，如不同數量的單元格，字段是非數字等。如有必要添加這些。

另外，根據它的生成方式，最好做這個服務器端。

來源

2011-06-02 19:59:38

對於服務器端的建議。 – ngen 2011-06-02 20:25:41

jQuery再次從標準JavaScript中獲勝，這是一場瘟疫。如果OP想要使用jQuery，他必須用'jquery'來標記他的問題。此外，如果您有**庫特定問題**，請使用jQuery論壇。請在此網站上詢問**真實的** JavaScript。 – Midas 2011-06-06 20:08:47

@Midas - 寒意。我完全同意人們經常使用jQuery，尤其是在這個網站上。我發佈了我做的答案，因爲它寫得更快，更容易閱讀/遵循並且是有效的解決方案。它可以很容易地推斷到正常的JS，這幾乎是你的答案。 – 2011-06-06 20:12:43

這是一個普通的JavaScript版本。

window.onload = function() { 
    var table = document.getElementById('mytable'); 
    var tr = table.getElementsByTagName('tr'); 
    var combined = Array(); 
    for (i = 0; i < tr.length; i++) { 
     var td = tr[i].getElementsByTagName('td'); 
     var key = td[0].innerText; 
     if (!combined[key]) {//if not initialised 
      combined[key] = Array(); 
      for (j = 0; j < td.length - 1; j++) combined[key][j] = 0; 
     } 
     for (j = 0; j < td.length - 1; j++) 
      combined[key][j] += parseInt(td[j + 1].innerText); 
    } 
    while (table.hasChildNodes()) table.removeChild(table.lastChild); 
    var tbody = document.createElement('tbody');//needed for IE 
    table.appendChild(tbody); 
    for (var i in combined) { 
     tr = document.createElement('tr'); 
     tbody.appendChild(tr); 
     td = document.createElement('td'); 
     td.innerText = i; 
     tr.appendChild(td); 
     for (j = 0; j < combined[i].length; j++) { 
      td = document.createElement('td'); 
      td.innerText = combined[i][j]; 
      tr.appendChild(td); 
     } 
    } 
}

這將工作在具有任意數量的行和任意數量的單元格的表上。我想你想爲每一列做出總和，這就是這個腳本所做的。

而且隨着cwolves的提及，在服務器端做這個更合乎邏輯。 JS禁用的用戶將看到不那麼幹淨的未組合表格。

來源

2011-06-02 20:52:32 Midas

將HTML表格行與Javascript結合使用

回答

相關問題