Question

I have xml file with data that i have to display in table. Now I am displaying all data row by row, so my table looks like:

User | Date | Something

John | 05.10| task_1    
John | 05.10| task_2    
John | 16.10| task_3
Jane | 16.10| task_1

but i want to get something like:

User | Date | Something

John | 05.10| task_1    
     |      | task_2    
     | 16.10| task_3
Jane | 16.10| task_1

so if date in particular cell is equal to corresponding cell in previous row ( or if that cell is empty then is equal to first non empty cell looking from bot to top) I would like to omit it.

Current code:

<table id="DataTable" datasrc="#XMLData" cols="3">
    <thead>
        <tr>
            <td class="Example">User</td>
            <td class="Example">Date</td>
            <td class="Example">Something</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span datafld="USER"></td>
            <td><span datafld="DATE"></td>
            <td><span datafld="SOMETHING"></td>
        </tr>
    </tbody>
</table>

note:

this problem is from existing (old) system and my options are limited. Particularly I cannot change xml file and I shouldn’t use server based asp.net controls ( but I can if there is no other way / it’s simplest solution), so I aim for pure html & javascript solution most.

Answer 1

If it needs to be something quick and dirty, use something like this…. I am hoping that you only have a single tBody 😉
Tested as working in FF (will need some crossbrowser clean up. will leave that to you). you might want to clean up the prevName/name comparison to suit your needs

var tablemerge = {
    init : function(){
        var tab = document.getElementById("DataTable");
        var prevName, prevDate;
        for (i=0;i<tab.tBodies[0].rows.length;i++){
            var name = tab.tBodies[0].rows[i].cells[0].innerHTML;
            var date = tab.tBodies[0].rows[i].cells[1].innerHTML;
            if (i== 0) { 
                prevName = name;
                prevDate = date;
                continue;
            }
            else{
                if (name == prevName)
                {
                    var cell = tab.tBodies[0].rows[i].deleteCell(0);
                    var cell = tab.tBodies[0].rows[i].insertCell(0);
                    if (date == prevDate)
                    {
                        var cell = tab.tBodies[0].rows[i].deleteCell(1);
                        var cell = tab.tBodies[0].rows[i].insertCell(1);
                    }
                    else{
                        prevDate = date;
                    }
                }
                else
                {
                    prevName = name;
                    prevDate = date;
                }
            }
        }
    }
}
tablemerge.init();