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

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

表1是 –

 表2是 –  
  
 
 
 
COLUMN_NAME
 
DATA_TYPE
 
IS_NULLABLE
 
CHARACTER_MAXIMUM_LENGTH
 
NUMERIC_PRECISION
 
COLUMN_KEY
 
 
 
 
 
CountryCode 
 
int 
 
YES 
 
NULL 
 
10 
 
 
 
Number 
 
varchar 
 
NO 
 
20 
 
NULL 
 
PRI 
 
 
Type 
 
tinyint 
 
NO 
 
NULL 
 
3 
 
PRI 
 
 
 
Date 
 
smalldatetime 
 
NO 
 
NULL 
 
NULL 
 
 
 

 
 
 
COLUMN_NAME
 
DATA_TYPE
 
IS_NULLABLE
 
CHARACTER_MAXIMUM_LENGTH
 
NUMERIC_PRECISION
 
COLUMN_KEY
 
 
 
 
 
CountryCode
 
int
 
NO
 
NULL
 
10
 
 
 
 
PhoneNumber
 
varchar
 
NO
 
20
 
NULL
 
PRI
 
 
 
Type
 
tinyint
 
NO
 
NULL
 
3
 
PRI
 
 
 
EffectiveDate
 
datetime
 
NO
 
NULL
 
NULL
 
 
 
 
 

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

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