compare two html tables data line by line and highlight using jquery
===

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?

Table 1 is -

       <table class="table loadTable" id ="table1">
	<thead>
	<tr bgcolor="#f0f0f0">
	<td nowrap=""><b>COLUMN_NAME</b></td>		
	<td nowrap=""><b>DATA_TYPE</b></td>		
	<td nowrap=""><b>IS_NULLABLE</b></td>		
	<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>		
	<td nowrap=""><b>NUMERIC_PRECISION</b></td>
	<td nowrap=""><b>COLUMN_KEY</b></td>
	</tr>
	</thead>
	<tbody>
	<tr>		
	  <td nowrap="">CountryCode   </td>
	  <td nowrap="">int   </td>
	  <td nowrap="">YES   </td>
           <td nowrap="">NULL </td>
           <td nowrap="">10   </td>
      </tr>
      <tr>		
		<td nowrap="">Number   </td>
		<td nowrap="">varchar   </td>
		<td nowrap="">NO   </td>
		<td nowrap="">20   </td>
                <td nowrap="">NULL </td>
                <td nowrap="">PRI </td>	
           </tr><tr>		
		<td nowrap="">Type   </td>
		<td nowrap="">tinyint   </td>
		<td nowrap="">NO   </td>
                <td nowrap="">NULL </td>
                <td nowrap="">3   </td>
                <td nowrap="">PRI </td>		
			</tr>
		<tr>		
			<td nowrap="">Date   </td>
			<td nowrap="">smalldatetime   </td>
			<td nowrap="">NO   </td>			
			<td nowrap="">NULL </td>
			<td nowrap="">NULL </td>
		</tr>
	</tbody>
</table>

table 2 is -

      <table class="table loadTable" id ="table2">
      <thead>
		<tr bgcolor="#f0f0f0">
	<td nowrap=""><b>COLUMN_NAME</b></td>
	<td nowrap=""><b>DATA_TYPE</b></td>
	<td nowrap=""><b>IS_NULLABLE</b></td>
	<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
	<td nowrap=""><b>NUMERIC_PRECISION</b></td>
	<td nowrap=""><b>COLUMN_KEY</b></td>
		</tr>
	</thead>
	<tbody>
		<tr>			
				<td nowrap="">CountryCode</td>
				<td nowrap="">int</td>
				<td nowrap="">NO</td>
				<td nowrap="">NULL</td>
				<td nowrap="">10</td>
				<td nowrap=""></td>
			</tr>
			<tr>	
				<td nowrap="">PhoneNumber</td>
				<td nowrap="">varchar</td>
				<td nowrap="">NO</td>
				<td nowrap="">20</td>
				<td nowrap="">NULL</td>
				<td nowrap="">PRI</td>
			</tr>
	<tr>		
				<td nowrap="">Type</td>
				<td nowrap="">tinyint</td>
				<td nowrap="">NO</td>
				<td nowrap="">NULL</td>
				<td nowrap="">3</td>
				<td nowrap="">PRI</td>
			</tr>
	<tr>		
				<td nowrap="">EffectiveDate</td>
				<td nowrap="">datetime</td>
				<td nowrap="">NO</td>
				<td nowrap="">NULL</td>
				<td nowrap="">NULL</td>
				<td nowrap=""></td>
			</tr>
	</tbody>
    </table>

if we click on following button then table 2 should get highlighted with any non matching data with table2.

    <div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>