0

in the previous snippet i compared two tables having columns as name and value pairs. this new one compares two tables of any number of columns(as long as it is the same number on both tables).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   
    <script type="text/javascript">
    function CompareTables(table1,table2)
   {
        var instHasChange = false;
        for(var i=0; i < table1.rows.length; i++)
        {
            var changes =RowExists(table2,table1.rows[i]);
            if(!changes)
            {
                 table1.rows[i].style.backgroundColor = "red";
                 instHasChange = true;
            }
          
            
        }
        for(var i=0; i < table2.rows.length; i++)
        {
            var changes = RowExists(table1,table2.rows[i]);
            if(!changes)
            {
                 table2.rows[i].style.backgroundColor = "#00CC33";
                 instHasChange = true;
            }
            
        }
        return instHasChange;
   }
   function RowExists(table,row)
   {    
        var columnCount = document.getElementById('tbl1').getElementsByTagName('tr')[0].getElementsByTagName('td').length;
       
        for(var i=0; i < table.rows.length; i++)
        {       hasColumn = true;
                for(var i2=0; i2 < columnCount; i2++)
                {
                   if(table.rows[i].cells[i2].innerHTML != row.cells[i2].innerHTML)
                   hasColumn = false;
                }
                if(hasColumn)
                return true;
        }
        return false;
   }
   function ConvertHtmlTableToDom(tableString)
   {
        var tempDiv = document.createElement("div");
        tempDiv.innerHTML = tableString;
        var domTable = tempDiv.firstChild;
        return domTable;
   }
    </script>
</head>
<body>
  
    <div>
        <table id="tbl1">
            <tr>
                <td style="width: 100px">
                    deneme</td>
                <td style="width: 100px">
                    deneme</td>
                <td style="width: 100px">
                    deneme</td>
            </tr>
            <tr>
                <td style="width: 100px">
                    c</td>
                <td style="width: 100px">
                    c</td>
                <td style="width: 100px">
                    c</td>
            </tr>
            <tr>
                <td style="width: 100px">
                    s</td>
                <td style="width: 100px">
                </td>
                <td style="width: 100px">
                </td>
            </tr>
        </table>
        <br />
        <br />
    
    </div>
        <table id="tbl2">
            <tr>
                <td style="width: 100px">
                    deneme</td>
                <td style="width: 100px">
                    deneme</td>
                <td style="width: 100px">
                    deneme</td>
            </tr>
            <tr>
                <td style="width: 100px">
                    a</td>
                <td style="width: 100px">
                    b</td>
                <td style="width: 100px">
                    c</td>
            </tr>
            <tr>
                <td style="width: 100px">
                    deneme</td>
                <td style="width: 100px">
                    deneme</td>
                <td style="width: 100px">
                    deneme</td>
            </tr>
        </table>
  
    <script type="text/javascript">
    CompareTables(document.getElementById("tbl1"),document.getElementById("tbl2"));
    </script>
</body>
</html>
1
Contributor
1
Reply
4
Views
8 Years
Discussion Span
Last Post by serkan sendur
0

in order to use the function generically:
this line :

var columnCount = document.getElementById('tbl1').getElementsByTagName('tr')[0].getElementsByTagName('td').length;

should be changed to :

var columnCount = table1.getElementsByTagName('tr')[0].getElementsByTagName('td').length;

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.