逐行比较两个html表数据并使用jquery进行高亮显示 [英] compare two html tables data line by line and highlight using jquery

问题描述

我创建了一个带有两个带数据的动态表的GSP页面，现在我必须比较数据（内部html），如果有任何差异，请在表2中突出显示。
如何使用JS单击按钮/ 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?

表1是 -

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>

表2是 - p>

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>

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

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>

推荐答案

我写了一个快速函数，行数始终相同，用户无法删除行。在这种情况下，您应该将id添加到行中，并通过id或key来比较行。

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

});
}

这篇关于逐行比较两个html表数据并使用jquery进行高亮显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！