Question

I have created a table on front end with several columns. The table with data looks something like below:

    ID         Name          Date1           Date2         Code1    
   00001        abc         2012/1/1         2012/1/10       1
   00002        def         2012/1/12        2012/2/1        1
   00002        def         2012/1/12        2012/2/1        2
   00002        def         2012/1/12        2012/2/1        3
   00003        xyz         2012/2/12        2012/3/1        2
   00003        xyz         2012/2/12        2012/3/1        4

Now I want to present data in above table in grouped manner i.e. every unique Id has only 1 row and all the code columns merged and displayed as 1 row.

    ID         Name          Date1           Date2         Code1    
   00001        abc         2012/1/1         2012/1/10       1
                                                             1
   00002        def         2012/1/12        2012/2/1        2                              
                                                             3
   00003        xyz         2012/2/12        2012/3/1        2
                                                             4

Please ignore my formatting style. Is this possible to do it programmatic when I do not have information about the number of code values coming? Thanks in advance.

Answer 1

This function will remove the contents of cells which duplicate the content of the cell above them. It won’t merge them (à la rowspan / colspan), but it will empty them.

function emptyDittoCells(table) {
    if (!(table instanceof jQuery && table.is("table")))
        throw "bad parameter";

    table.find('tr').each(function(rowElement) {
        var row = $(rowElement);
        var previousRow = $(rowElement).prev('tr');
        if (!previousRow.length) return;

        row.each(function(cellElement, index) {
            var cell = $(cellElement);
            var previousCell = previousRow.children("td:nth-child(" + index + ")"); 

            while (previousCell.data('ditto')) {
                previousCell = previousCell.data('ditto');
            }

            if (hasSameContents(cell, previousCell)) {
                cell.empty()
                    .data('ditto', previousCell);
            }
        });
    });
}

function hasSameContents(a, b) {
    return (a.text() == b.text()); // naive but usable in the simple case
}

untested and a little DOM-intensive, but I think it’ll work. Besides possible syntax errors (missing close-parentheses), I’m mostly concerned about that td:nth-child() selector. That could be written more robustly as $(previousRow.children('td').get(index)).