In diesem Artikel möchte ich euch ein kleines JQuery-Snippet vorstellen, mit dem ihr eine Tabellenzeile farblich hervorheben könnt, wenn eine Checkbox innerhalb dieser Tabellenzeile markiert/gesetzt/gecheckt wurde.

Zu erst einmal möchte ich kurz die Ausgangslage schildern. Die Grundlage stellt eine Tabelle in HTML dar. Die Tabelle ist so aufgebaut, dass z.B. in jeder Zeile in der ersten Spalte eine Checkbox vorhanden ist – vergleichbar mit GMail. Nun sollen die Input-Felder vom Typ Checkbox beim „checken“ dafür sorgen, dass die gesamte Tabellenzeile z.B. einen anderen Hintergrund bekommt. Soweit die Theorie. Das Beispiel HTML Markup sieht folgendermaßen aus:

    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

Um das JQuery-Snippet zum Laufen zu bekommen, solltet ihr natürlich JQuery korrekt einbinden. Somit ist der Weg frei um das JQuery-Snippet hinzuzufügen:


Das Snippet sorgt jetzt dafür, dass bei jedem Klick auf die Checkbox überprüft wird, ob diese gesetzt ist oder nicht, um dann je nach Status eine CSS-Klasse names „checked“ an dem übergeordneten <TR>-Tag hinzuzufügen oder zu entfernen. Das Snippet funktioniert soweit gut, solange keine Inhalte dynamisch via AJAX geladen werden. Um diese Variante auch abzudecken solltet ihr folgendes Snippet verwenden:


Nachdem dafür gesorgt wurde, dass eine CSS-Klasse an dem übergeordneten <TR>-Tag vorhanden ist, kann genau über diese z.B. der Hintergrund der Tabellenzeile verändert werden. Das könnte folgendermaßen aussehen:

  

Demo

Wenn ihr dem obenstehenden Link folgt, könnt ihr euch das JQuery-Snippet in einer kleinen Demo-Version anschauen.