Comparing two html tables without a primary key

serkan sendur 0 145 Views

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>
Member Avatar for serkan sendur
serkan sendur 821 Postaholic

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;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview