Javascript 突出显示HTML表格行数据中的差异

Javascript 突出显示HTML表格行数据中的差异,javascript,html,jquery,Javascript,Html,Jquery,我有一个HTML表格,其中: 第一行是表的标题 第三行显示错误数据 对于每个错误的行,我们有一行显示正确的数据(第二行) 我想用HTML/Javascript/Jquery编写一个函数来突出显示两行之间具有匹配数据的单元格。我们可能有两行以上的数据 因此,基本上,我们必须测试两个集合中的行,即跳过第一个标题行。比较第二到第三,然后测试第四到第五,然后测试第六到第七,依此类推 在下面的示例中,John Popular先生在第11列(列名:Required?)中的期望值为“N”,但excel报告

我有一个HTML表格,其中:

  • 第一行是表的标题
  • 第三行显示错误数据
  • 对于每个错误的行,我们有一行显示正确的数据(第二行)
我想用HTML/Javascript/Jquery编写一个函数来突出显示两行之间具有匹配数据的单元格。我们可能有两行以上的数据

因此,基本上,我们必须测试两个集合中的行,即跳过第一个标题行。比较第二到第三,然后测试第四到第五,然后测试第六到第七,依此类推

在下面的示例中,John Popular先生在第11列(列名:Required?)中的期望值为“N”,但excel报告显示为“Y”

对于Bill Smith先生,即第4行和第5行中的“未来预计日期”列和“服务日期”列中的日期不同

我想强调这一区别


试验
名字
姓
个人id
合同id
计划id
作者编号
要求
窗口类型
日期请求
必修的?
解决了的?
更高的造诣?
地位
未来有效期
问题解决了吗?
服务日期
出口日期
系统日期
接收日期
TAT1
DaysTAT1
TAT2
DaysTAT2
正确数据
约翰
流行的
759876
J4856
642
837522
A.
法罗群岛
2019-01-14
N
N
NA
经核准的
2019-01-14
NA
NA
NA
2019-01-14
NA
0
Y
NA
N
错误数据
约翰
流行的
759876
J4856
642
837522
A.
法罗群岛
2019-01-14
Y
N
NA
经核准的
2019-01-14
NA
NA
NA
2019-01-14
NA
0
Y
NA
N
正确数据
比尔
史密斯
64963
J6291
642
837522
A.
法罗群岛
2019-01-14
N
N
NA
经核准的
2019-01-17
NA
NA
NA
2019-01-18
NA
0
Y
NA
N
错误数据
比尔
史密斯
64963
J6291
642
837522
A.
法罗群岛
2019-01-17
N
N
NA
经核准的
2019-01-18
NA
NA
NA
2019-01-14
NA
0
Y
NA
N

检查约束
我有一个表,它在第一行显示来自数据库的数据(正确的数据)。 第二行显示excel中的错误数据(错误数据)

我希望通过突出显示单元格,使最终用户更容易看到数据库数据和excel数据之间的差异

取原始代码和2行,删除
单元格
部分,因为它沿行而不是沿列进行检查。还可以删除循环行,因为只有两行,因此这是比较
行[0][col]
行[1][col]

通过一些其他调整,例如删除令人困惑的
.toggleClass(class,true)
,并稍微调整类名/按钮标题,以更清楚地显示它们的作用,提供:

函数高亮显示(){
$(参数).addClass('changed');
}
函数检查约束(e){
//重新检查前重置样式
$('td.changed').removeClass('changed');
//将行作为数组的数组获取
变量行=$('tbody>tr').map(函数(elem,i){
返回[$(this.children('td').toArray()];
}).toArray();
//只有2行,所以不需要循环它们
//从j=1开始跳过第一列
对于(var j=1;j<行[0]。长度;j++){
if(行[0][j].innerText!=行[1][j].innerText)
{               
突出显示(行[0][j],行[1][j]);
}            
}        
}
$(“按钮”)。单击(检查约束)
td{
宽度:100px;
高度:50px;
边框:1px纯黑;
}
桌子{
边框:1px纯黑;
边界塌陷:塌陷;
}
改变{
背景:橙色;
}

试验
名字
姓
个人id
合同id
计划id
作者编号
日期请求
必修的?
解决了的?
更高的造诣?
地位
正确数据
约翰
流行的
759876
J4856
642
837522
2019-01-14
N
N
NA
经核准的
错误数据
约翰
灯芯
759876
J4856
-642
837522
2019-01-14
Y
N
NA
经核准的


比较行
TBH,这个问题有点混乱:我有两行-第11列有4行-第3列。“因为数据不匹配,所以代码不应该突出显示”-但这完全是代码的目的(或者是在它们相同时突出显示?)。如果您不想突出显示任何内容。。。不要调用
checkConstraints()
。你能把问题整理一下,弄清楚结果应该是什么吗?谢谢你的回答。我已经在中创建了原始代码的副本。有两行和一个标题行。两行是相同的。唯一的区别是在第11列。这不是一个奇妙的代码,但也不是一个好的SO问题,所以这里有一些注释:
cell={}
应该是
cachedValues={}
,然后它会更有意义。.map()创建一个数组