Jquery выберите два столбца в таблице и сравните значения TD по строкам

Question

Я создал небольшой html-файл, который позволяет пользователю выбирать два столбца, используя два раскрывающихся меню.

Как только пользователь выбирает два столбца и нажимает кнопку «СРАВНИТЬ», отображаются два выбранных столбца.

Затем пользователь должен просмотреть разницу между двумя столбцами (они имеют разный цвет фона). Строки, содержащие один и тот же текст в цветных столбцах, должны отображать текст «без изменений».

Вот скрипка, что лучше иллюстрирует мою проблему:

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

... но он не работает :(

.

Последний вопрос (извините): если вы нажмете на кнопку «СРАВНИТЬ», вы увидите два столбца, которые будут показаны. И если вы выберете другие столбцы и нажмите RE-click кнопку «СРАВНИТЬ», другой столбец s появляются справа. Как сбросить всю страницу при повторном нажатии кнопки COMPARE?

Возможно, я могу скрыть кнопку COMPARE и показать еще одну кнопку (RESET), которая перезагрузит страницу. Это будет мой подход новичков. Каков наилучший подход к получению одного и того же результата?

Answer 1

Ваша ссылка на tabella не соответствует ни одному элементу; смените селектор на:

С помощью нескольких дополнительных линий вы можете вернуть таблицу в исходное состояние без перезагрузки страницы.

Полный пример, основанный на коде:

JSFIDDLE