比較由線上的兩個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或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; 
     } 
    }); 

}); 
}