逐行比较两个html表数据并使用jquery突出显示

Question

我创建了一个 GSP 页面，其中包含两个带有数据的动态表，现在我必须比较数据（内部 html），如果有任何差异，则在表 2 中突出显示。 如何在客户端使用 JS/jquery 点击按钮？

表1是-

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

表 2 是 -

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

如果我们点击下面的按钮，那么表 2 应该会突出显示任何与表 2 不匹配的数据。

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

Answer 1

我编写了一个快速函数，只要行数始终相同并且用户无法删除行，它就可以工作。在这种情况下，您应该将 id 添加到行中并按 id 或键比较行。

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;
        }
    });

});
}