Zebra Tabellen mit jQuery

Wenn man in einer Tabelle abwechselnde Farben einsetzen möchte und keine Möglichkeit hat mit PHP etc. CSS klassen zu setzen, ist der einfachste Weg dies mit jQuery zu tun. Mit folgender Zeile erhält jedes ungerade tr element eine CSS Klasse zugewiesen – egal wie lang oder kurz die Tabelle ist.

$("tr:nth-child(odd)").addClass("farbe");

Danach muss man im CSS nur noch die gewünschte Farbe definieren und schon ist die Zebra Tabelle fertig – also zum Beispiel:

tr.farbe td {background:#eeeeee;}

Eine weitere Möglichkeit ist, statt der Klasse gleich mit javascript die Hintergrundfarbe zuzuweisen, dann kann man sich die CSS Anweisung sparen.

$("tr:nth-child(odd)").css("backgroundColor", "#cccccc");