CODEWITHSUNDEEP
javascriptphphtml-table
bmbaeb
bmbaeb

Reputation: 540

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>

Upvotes: 1

Views: 1327

Answers (2)

Midas
Midas

Reputation: 7131

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.

Upvotes: 3

user578895
user578895

Reputation:

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.

Upvotes: 4

Related Questions