1

データを含む2つの動的テーブルを含む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>
4

1 に答える 1

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

});
}
于 2012-07-18T19:22:32.677 に答える