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 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>

回答1:

I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.

function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
    var t1row = $(this);
    var t2row = $(t2rows[index]);
    var t2tds = t2row.find('td');

    t1row.find('td').each(function(index){
        if($(this).text().trim() != $(t2tds[index]).text().trim() ){
            console.log('difference: table1:('+$(this).text()+')  table2:('+$(t2tds[index]).text()+')');
            //set row in error
            return;
        }
    });

});
}

来源：https://stackoverflow.com/questions/11548431/compare-two-html-tables-data-line-by-line-and-highlight-using-jquery

标签

javascript

jquery

grails

gsp