title: compare two html tables data line by line and highlight using jquery
body: <p>I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
  how to do it on clicking button using JS/jquery on clientside?</p>
  
  <p>Table 1 is -</p>
  
  <pre><code>   &lt;table class="table loadTable" id ="table1"&gt;
  &lt;thead&gt;
  &lt;tr bgcolor="#f0f0f0"&gt;
  &lt;td nowrap=""&gt;&lt;b&gt;COLUMN_NAME&lt;/b&gt;&lt;/td&gt;       
  &lt;td nowrap=""&gt;&lt;b&gt;DATA_TYPE&lt;/b&gt;&lt;/td&gt;     
  &lt;td nowrap=""&gt;&lt;b&gt;IS_NULLABLE&lt;/b&gt;&lt;/td&gt;       
  &lt;td nowrap=""&gt;&lt;b&gt;CHARACTER_MAXIMUM_LENGTH&lt;/b&gt;&lt;/td&gt;      
  &lt;td nowrap=""&gt;&lt;b&gt;NUMERIC_PRECISION&lt;/b&gt;&lt;/td&gt;
  &lt;td nowrap=""&gt;&lt;b&gt;COLUMN_KEY&lt;/b&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;        
    &lt;td nowrap=""&gt;CountryCode   &lt;/td&gt;
    &lt;td nowrap=""&gt;int   &lt;/td&gt;
    &lt;td nowrap=""&gt;YES   &lt;/td&gt;
         &lt;td nowrap=""&gt;NULL &lt;/td&gt;
         &lt;td nowrap=""&gt;10   &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;      
      &lt;td nowrap=""&gt;Number   &lt;/td&gt;
      &lt;td nowrap=""&gt;varchar   &lt;/td&gt;
      &lt;td nowrap=""&gt;NO   &lt;/td&gt;
      &lt;td nowrap=""&gt;20   &lt;/td&gt;
              &lt;td nowrap=""&gt;NULL &lt;/td&gt;
              &lt;td nowrap=""&gt;PRI &lt;/td&gt; 
         &lt;/tr&gt;&lt;tr&gt;        
      &lt;td nowrap=""&gt;Type   &lt;/td&gt;
      &lt;td nowrap=""&gt;tinyint   &lt;/td&gt;
      &lt;td nowrap=""&gt;NO   &lt;/td&gt;
              &lt;td nowrap=""&gt;NULL &lt;/td&gt;
              &lt;td nowrap=""&gt;3   &lt;/td&gt;
              &lt;td nowrap=""&gt;PRI &lt;/td&gt;     
          &lt;/tr&gt;
      &lt;tr&gt;        
          &lt;td nowrap=""&gt;Date   &lt;/td&gt;
          &lt;td nowrap=""&gt;smalldatetime   &lt;/td&gt;
          &lt;td nowrap=""&gt;NO   &lt;/td&gt;            
          &lt;td nowrap=""&gt;NULL &lt;/td&gt;
          &lt;td nowrap=""&gt;NULL &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>table 2 is -</p>
  
  <pre><code>  &lt;table class="table loadTable" id ="table2"&gt;
    &lt;thead&gt;
      &lt;tr bgcolor="#f0f0f0"&gt;
  &lt;td nowrap=""&gt;&lt;b&gt;COLUMN_NAME&lt;/b&gt;&lt;/td&gt;
  &lt;td nowrap=""&gt;&lt;b&gt;DATA_TYPE&lt;/b&gt;&lt;/td&gt;
  &lt;td nowrap=""&gt;&lt;b&gt;IS_NULLABLE&lt;/b&gt;&lt;/td&gt;
  &lt;td nowrap=""&gt;&lt;b&gt;CHARACTER_MAXIMUM_LENGTH&lt;/b&gt;&lt;/td&gt;
  &lt;td nowrap=""&gt;&lt;b&gt;NUMERIC_PRECISION&lt;/b&gt;&lt;/td&gt;
  &lt;td nowrap=""&gt;&lt;b&gt;COLUMN_KEY&lt;/b&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;            
              &lt;td nowrap=""&gt;CountryCode&lt;/td&gt;
              &lt;td nowrap=""&gt;int&lt;/td&gt;
              &lt;td nowrap=""&gt;NO&lt;/td&gt;
              &lt;td nowrap=""&gt;NULL&lt;/td&gt;
              &lt;td nowrap=""&gt;10&lt;/td&gt;
              &lt;td nowrap=""&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;    
              &lt;td nowrap=""&gt;PhoneNumber&lt;/td&gt;
              &lt;td nowrap=""&gt;varchar&lt;/td&gt;
              &lt;td nowrap=""&gt;NO&lt;/td&gt;
              &lt;td nowrap=""&gt;20&lt;/td&gt;
              &lt;td nowrap=""&gt;NULL&lt;/td&gt;
              &lt;td nowrap=""&gt;PRI&lt;/td&gt;
          &lt;/tr&gt;
  &lt;tr&gt;        
              &lt;td nowrap=""&gt;Type&lt;/td&gt;
              &lt;td nowrap=""&gt;tinyint&lt;/td&gt;
              &lt;td nowrap=""&gt;NO&lt;/td&gt;
              &lt;td nowrap=""&gt;NULL&lt;/td&gt;
              &lt;td nowrap=""&gt;3&lt;/td&gt;
              &lt;td nowrap=""&gt;PRI&lt;/td&gt;
          &lt;/tr&gt;
  &lt;tr&gt;        
              &lt;td nowrap=""&gt;EffectiveDate&lt;/td&gt;
              &lt;td nowrap=""&gt;datetime&lt;/td&gt;
              &lt;td nowrap=""&gt;NO&lt;/td&gt;
              &lt;td nowrap=""&gt;NULL&lt;/td&gt;
              &lt;td nowrap=""&gt;NULL&lt;/td&gt;
              &lt;td nowrap=""&gt;&lt;/td&gt;
          &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>if we click on following button then table 2 should get highlighted with any non matching data with table2.</p>
  
  <pre><code>&lt;div style="align:right"&gt;&lt;input type="submit" value="Compare IVR &amp; TNS" /&gt;&lt;/div&gt;
  </code></pre>