Question

有没有一种简单的方法来组合第一列相同的HTML表格中的行？我基本上有一个表格设置如下：

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

Answer 1

使用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();
    }
});

这是一个“哑”脚本 - 对于不同数量的单元格，非数字字段等情况没有错误处理。如有必要，请添加。

此外，根据它的生成方式，最好在服务器端执行此操作。

Answer 2

这是一个简单的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结合使用

2 个答案: