开发者

Combine HTML Table Rows with Javascript

Is there an easy way to combine rows in an HTML table where the first column is the same? I basically have a table set up like:

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

and I want it to generate:

<table>
<tr><td>test</td><td>37035</td><td>37035</td><tr>开发者_开发知识库;
<tr><td>test2</td><td>24690</td><td>24690</td><tr>
</table>


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

this is a "dumb" script -- no error handling for cases like different number of cells, fields being non-numeric, etc. Add those if necessary.

Also, depending on how it's generated, it's better to do this server-side.


Here's a plain JavaScript version.

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

This will work on tables with any number of rows and any number of cells. I suppose you want to make the sum for every column, that's what this script does.

And as cwolves mentioned, it is more logical to do this serverside. Users that have JS disabled will see the not so clean uncombined table.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜