AJAX

Comparing two html tables

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

serkan sendur serkan sendur is offline

Offline Feb 26th, 2009, 11:18 am |

compares to tables and highligthts the changes

Show Printable Version

Code Snippet

•

JavaScript / DHTML / AJAX Syntax

Toggle Plain Text

function CompareTables(table1,table2)
   {
        var instHasChange = false;
        for(var i=0; i < table1.rows.length; i++)
        {
            var changes =RowExists(table2,table1.rows[i].cells[0].innerHTML,table1.rows[i].cells[1].innerHTML);
            if(!changes[0])
            {
                 table1.rows[i].style.backgroundColor = "red";
                 instHasChange = true;
            }
            else if(changes[1])
            {
                table1.rows[i].style.backgroundColor = "orange";
                instHasChange = true;
            }
 
        }
        for(var i=0; i < table2.rows.length; i++)
        {
            var changes = RowExists(table1,table2.rows[i].cells[0].innerHTML,table2.rows[i].cells[1].innerHTML);
            if(!changes[0])
            {
                 table2.rows[i].style.backgroundColor = "#00CC33";
                 instHasChange = true;
            }
            else if(changes[1])
            {
                table2.rows[i].style.backgroundColor = "orange";
                instHasChange = true;
            }
        }
        return instHasChange;
   }
   function RowExists(table,columnName,columnValue)
   {
        var hasColumnOrChange = new Array(2);
        hasColumnOrChange[0] = false;
        hasColumnOrChange[1] = false;
        for(var i=0; i < table.rows.length; i++)
        {
            if(table.rows[i].cells[0].innerHTML == columnName)
            {
                hasColumnOrChange[0] = true;
                if(table.rows[i].cells[1].innerHTML != columnValue)
                hasColumnOrChange[1] = true;
            }
 
        }
        return hasColumnOrChange;
   }
 
//note : tables are passed by reference so you just pass them using document.getElementById("tableID") method.