Nun, du kannst einfach machen tr {background-color: #FFF;} und ich denke, die .odd wird sie überschreiben, und wenn nicht, kannst du immer noch die Hintergrundfarbe für :odd mit !important versehen.
Da Ihr Beispiel alle Tabellenzeilen zählt, ohne zu berücksichtigen, um welche Tabelle es sich handelt. Der obige Code beginnt immer mit einer geraden Zeile, auch wenn es sich im Wesentlichen um die 7. Tabellenzeile in Ihrem Dokument handelt.
Bump! Das ist die Implementierung, die ich brauchte, weil ich mehrere Tabellen auf einer Seite habe. Dies beginnt den Index bei jeder neuen Tabelle auf der Seite neu. Danke!
Ich bin neu. Ich habe den Code ausprobiert und er funktioniert nicht. Kann ich bitte ein vollständiges Beispiel für die Verwendung des Codes haben? Danke
Ja, CSS kann das Zebra-Striping machen, vorausgesetzt, Sie haben die entsprechende HTML-Struktur. Die Verwendung von jQuery für diesen Zweck kann den Umfang der Markup reduzieren. Außerdem ist die Verwendung von jQuery für diesen Zweck hilfreich, wenn Sie dynamisch Zeilen in einer Tabelle auf der Client-Seite mit AJAX hinzufügen oder entfernen und sicherstellen möchten, dass die Tabelle weiterhin das gewünschte Zebra-Striping aufweist. Nachdem Sie beispielsweise eine Zeile hinzugefügt oder gelöscht haben, rufen Sie einfach eine jQuery-Funktion auf, um das Zebra-Striping erneut anzuwenden.
Ein weiteres Szenario, in dem die Verwendung von jQuery für Zebra-Striping nützlich ist, ist, wenn Sie eine Client-seitige Sortierung einer Tabelle durchführen. Nach der Sortierung möchten Sie das Zebra-Striping auf die Tabellenzeilen erneut anwenden.
Ich benutze gerne $(‘tbody tr:odd’) – damit es im tbody nachschaut und meine Kopfzeilen nicht mitzählt, aber das ist nur meine Meinung.
Ich verwende dies überall, versuche aber herauszufinden, ob Zebra-Striping oder Zeilenhervorhebung bei großen Tabellen besser funktioniert. Ich habe eine Online-Umfrage, an der Sie teilnehmen können, wenn Sie interessiert sind: http://access2learn.com/survey1/
Wenn Sie die Tabelle nach dem Sortieren oder Löschen von Zeilen usw. zurücksetzen möchten. Das dauert zwei Zeilen. Ich frage mich, ob jemand weiß, wie man das in eine Funktion packt, die aufgerufen werden kann. resetStripes() oder so etwas?
Hier ist der Zwei-Zeilen-Aufruf, den ich im Moment mache.
Oder um sehr präzise zu sein... d.h. wenn Sie möchten, dass die erste Zeile/li die odd-Klasse hat, sollten Sie tun $(“tr:even”).addClass(“odd”); (0-basierte Indizierung)
Ja, das kann man mit reinem CSS machen, aber was ist, wenn man möchte, dass es in IE8 oder niedriger funktioniert? jQuery oder ein viel längeres DOM-Skript macht es möglich.
Sie können jetzt tr:nth-child(2n) verwenden, das jede gerade Zeile auswählt. Mit tr:nth-child(2n-1) werden ungerade Zeilen ausgewählt, tr:nth-child(3n) für jede dritte Zeile.
Wie würde man eine Tabelle mit Zebra-Streifen versehen, bei der einige Zeilen `display:none` Tags haben? Es gibt Situationen, in denen wir bestimmte Zeilen in verschiedenen Szenarien ausblenden möchten. Aber wenn wir das tun, werden diese Zebra-Streifen über Zeilen gelegt, die nicht angezeigt werden, was zu seltsam aussehenden Tabellen führt.
Sehr gut! Ich wusste nichts von :odd. Man lernt jeden Tag etwas Neues :D
(Ich würde jedoch :even (vorausgesetzt, es existiert) verwenden, da ich die erste Zeile als „normale“ Farbe haben möchte).
Nun, du kannst einfach machen
tr {background-color: #FFF;}und ich denke, die .odd wird sie überschreiben, und wenn nicht, kannst du immer noch die Hintergrundfarbe für :odd mit !important versehen.
Ja, die .odd Klasse wird es überschreiben.
Du bist großartig Chris, danke, dass du all diesen Kram gepostet hast!
Es ist besser zu verwenden
$('tr:nth-child(odd)').addClass('odd');Da Ihr Beispiel alle Tabellenzeilen zählt, ohne zu berücksichtigen, um welche Tabelle es sich handelt. Der obige Code beginnt immer mit einer geraden Zeile, auch wenn es sich im Wesentlichen um die 7. Tabellenzeile in Ihrem Dokument handelt.
Danke! Genau das, was ich gesucht habe
Bump! Das ist die Implementierung, die ich brauchte, weil ich mehrere Tabellen auf einer Seite habe. Dies beginnt den Index bei jeder neuen Tabelle auf der Seite neu. Danke!
Ich bin neu. Ich habe den Code ausprobiert und er funktioniert nicht. Kann ich bitte ein vollständiges Beispiel für die Verwendung des Codes haben? Danke
@dani, hier ist eine einfache Demo, die genau erklärt, wie dieser Code verwendet wird, und ein Live-Beispiel, wie er verwendet wird.
http://webdesignandsuch.com/2010/08/add-zebra-striping-to-a-table-with-jquery/
Warum willst du jQuery benutzen?? CSS kann das.
Das dachte ich auch...
Gibt es einen Grund dafür, irgendjemand???
Ja, CSS kann das Zebra-Striping machen, vorausgesetzt, Sie haben die entsprechende HTML-Struktur. Die Verwendung von jQuery für diesen Zweck kann den Umfang der Markup reduzieren. Außerdem ist die Verwendung von jQuery für diesen Zweck hilfreich, wenn Sie dynamisch Zeilen in einer Tabelle auf der Client-Seite mit AJAX hinzufügen oder entfernen und sicherstellen möchten, dass die Tabelle weiterhin das gewünschte Zebra-Striping aufweist. Nachdem Sie beispielsweise eine Zeile hinzugefügt oder gelöscht haben, rufen Sie einfach eine jQuery-Funktion auf, um das Zebra-Striping erneut anzuwenden.
Ein weiteres Szenario, in dem die Verwendung von jQuery für Zebra-Striping nützlich ist, ist, wenn Sie eine Client-seitige Sortierung einer Tabelle durchführen. Nach der Sortierung möchten Sie das Zebra-Striping auf die Tabellenzeilen erneut anwenden.
Ich benutze gerne $(‘tbody tr:odd’) – damit es im tbody nachschaut und meine Kopfzeilen nicht mitzählt, aber das ist nur meine Meinung.
Ich verwende dies überall, versuche aber herauszufinden, ob Zebra-Striping oder Zeilenhervorhebung bei großen Tabellen besser funktioniert. Ich habe eine Online-Umfrage, an der Sie teilnehmen können, wenn Sie interessiert sind: http://access2learn.com/survey1/
Danke.
Wenn Sie die Tabelle nach dem Sortieren oder Löschen von Zeilen usw. zurücksetzen möchten. Das dauert zwei Zeilen. Ich frage mich, ob jemand weiß, wie man das in eine Funktion packt, die aufgerufen werden kann. resetStripes() oder so etwas?
Hier ist der Zwei-Zeilen-Aufruf, den ich im Moment mache.
$(“.stripeme tbody tr”).removeClass(“alt”);
$(“.stripeme tbody tr:even”).addClass(“alt”);
Vielen Dank,
Jana
Ich mochte diesen Tipp sehr – er wird sehr nützlich sein und viel Programmierzeit sparen…
Ausgezeichnet. Sehr einfache Lösung. Danke
Oder um sehr präzise zu sein... d.h. wenn Sie möchten, dass die erste Zeile/li die odd-Klasse hat, sollten Sie tun
$(“tr:even”).addClass(“odd”);
(0-basierte Indizierung)
Ich möchte nur sagen, dass es mit reinem CSS vollständig machbar ist.
tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
und Sie können spezifische Tabellen gezielt ansprechen, falls erforderlich. (fügen Sie Klasse oder ID zu Ihrer Tabelle hinzu)
table.mytableclass tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
table.mytableclass tbody tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
oder mit IDs
table#mytableclass tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
table#mytableclass tbody tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
Respekt dafür. :D
Ich wusste nichts von dem odd Pseudo-Element, danke
Ja, das kann man mit reinem CSS machen, aber was ist, wenn man möchte, dass es in IE8 oder niedriger funktioniert?
jQuery oder ein viel längeres DOM-Skript macht es möglich.
Danke für die „einfachste“ Idee zur Erstellung von Zebra-Styling.
Wie kann man nun dasselbe erreichen, aber ohne jQuery? (Abgesehen vom Hinzufügen der Klasse „odd“ zu den gewünschten Zeilen!).
Danke im Voraus
Sie können jetzt tr:nth-child(2n) verwenden, das jede gerade Zeile auswählt. Mit tr:nth-child(2n-1) werden ungerade Zeilen ausgewählt, tr:nth-child(3n) für jede dritte Zeile.
Danke für diese Seite!
Wie würde man eine Tabelle mit Zebra-Streifen versehen, bei der einige Zeilen `display:none` Tags haben? Es gibt Situationen, in denen wir bestimmte Zeilen in verschiedenen Szenarien ausblenden möchten. Aber wenn wir das tun, werden diese Zebra-Streifen über Zeilen gelegt, die nicht angezeigt werden, was zu seltsam aussehenden Tabellen führt.
Anstatt Ihre CSS-Datei zu ändern, könnten Sie einfach Folgendes tun