Jquery选择表中的两列并逐行比较TD值

Question

我创建了一个小型 html 文件，允许用户使用两个下拉菜单选择两列。

用户选择两列并单击“比较”按钮后，将显示所选的两列。

接下来，用户应该查看两列之间的差异(它们具有不同的背景颜色)。彩色列中包含相同文本的行应显示文本“无更改”。

这是一个更好地说明我的问题的 fiddle :

https://jsfiddle.net/0Lzwojmb/

我尝试使用此代码:

$(".tabella tr").each(function(){
    if($(this).find("td.slot1").text()==$(this).find("td.slot2").text())
    {
       $(this).find("td.slot2").text("MATCHED!");
    }   
});

...但它不起作用:(。

最后一个问题(抱歉):如果您单击“比较”按钮，您会显示两列。如果您选择其他列并重新单击“比较”按钮，其他列将显示在右侧。再次单击“比较”按钮时如何重置整个页面？

也许我可以隐藏“比较”按钮并显示另一个将重新加载页面的按钮(重置)。这将是我的新手方法。获得相同结果的最佳方法是什么？

Answer 1

您对tabella的引用与任何元素都不匹配；将选择器更改为:

$("table tr").each(function() { ... });

通过几行额外的行，您可以将表格重置为其原始状态，而无需重新加载页面。

基于您的代码的完整示例:

JSFIDDLE