Jquery wählen Sie zwei Spalten in einer Tabelle und vergleichen Sie TD-Werte Zeile für Zeile

Question

Ich habe eine kleine HTML-Datei erstellt, die es dem Benutzer ermöglicht, zwei Spalten mit zwei Dropdown-Menüs auszuwählen.

Sobald der Benutzer die zwei Spalten auswählt und auf die COMPARE-Schaltfläche klickt, werden die zwei ausgewählten Spalten angezeigt.

Als nächstes sollte der Benutzer den Unterschied zwischen den beiden Spalten sehen (sie haben unterschiedliche Hintergrundfarbe). Die Zeilen, die den gleichen Text in den farbigen Spalten enthalten, sollten den Text "keine Änderung" anzeigen.

Hier ist eine Geige, die besser mein Problem zeigt:

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

... aber es funktioniert nicht :(

:

https://jsfiddle.net/0Lzwojmb/

ich mit diesem Code versucht.

Letzte Frage (tut mir leid): Wenn Sie auf die Schaltfläche COMPARE klicken, erhalten Sie die zwei Spalten zu sehen.Wenn Sie andere Spalten auswählen und RE-klicken Sie auf die Schaltfläche COMPARE die andere Spalte s erscheinen auf der rechten Seite. Wie kann die gesamte Seite zurückgesetzt werden, wenn erneut auf die COMPARE-Schaltfläche geklickt wird?

Vielleicht kann ich die COMPARE-Taste ausblenden und eine andere Taste (RESET) anzeigen, die die Seite neu lädt. Das wäre mein Anfängeransatz. Was ist der beste Ansatz, um das gleiche Ergebnis zu erzielen?

Answer 1

Ihre Referenz zu tabella stimmt mit keinem Element überein; Ändern Sie Ihren Selektor zu:

Mit ein paar zusätzlichen Zeilen können Sie Ihre Tabelle in den ursprünglichen Zustand zurücksetzen, ohne die Seite neu zu laden.

Komplettes Beispiel basierend auf dem Code:

JSFIDDLE