将HTML表行与Javascript相结合 - Combine HTML Table Rows with Javascript

Combine HTML Table Rows with Javascript

本文关键字：Javascript 相结合 HTML | 更新日期: 2023-09-27

有没有一种简单的方法可以在第一列相同的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>

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

这是一个"愚蠢"的脚本——对于不同数量的单元格、非数字字段等情况，没有错误处理。如果需要，请添加这些。

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

这是一个简单的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的用户将看到不那么干净的未组合表。