Combine HTML Table Rows with Javascript

Question

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>

Where is it generated from? Show us the code.

patapizza
– patapizza

2011-06-02 19:56:38 +00:00
Commented Jun 2, 2011 at 19:56 — patapizza
– patapizza, Commented Jun 2, 2011 at 19:56

user578895 · Accepted Answer · 2011-06-02 19:59:38Z

4

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.

answered Jun 2, 2011 at 19:59

user578895

Sign up to request clarification or add additional context in comments.

2 Comments

Midas Over a year ago

Again jQuery wins from standard JavaScript, it's a plague. If the OP wants to use jQuery, he has to tag his question with 'jquery'. And besides, please use the jQuery forums if you have library specific questions. Please ask about real JavaScript on this site.

user578895 Over a year ago

@Midas - Chill. I fully agree that people use jQuery far too often, especially on this site. I posted the answer I did because it was faster to write, easier to read/follow and is a valid solution. It can easily be extrapolated to normal JS, which was pretty much what your answer was.

Midas · Accepted Answer · 2011-06-02 21:05:55Z

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.

Collectives™ on Stack Overflow

Combine HTML Table Rows with Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related