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>

Answer 1

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.