将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>

它从哪里产生？向我们展示代码。 – 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(); 
    } 
});

这是一个 “愚蠢” 的剧本 - 不是错误处理的情况下，如不同数量的单元格，字段是非数字等。如有必要添加这些。

另外，根据它的生成方式，最好做这个服务器端。

对于服务器端的建议。 – 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禁用的用户将看到不那么干净的未组合表格。

将HTML表格行与Javascript结合使用

相关推荐