Wie kann ich mit CSS und jQuery abwechselnde Zeilenfarben in HTML-Tabellen erstellen?

Mit CSS alternierende Tabellenzeilenfarben erstellen

Um die Hintergrundfarben von Tabellenzeilen mit CSS dynamisch zu wechseln, können Sie die CSS-Eigenschaften manipulieren von Tabellen- und Zeilenelementen.

Verwendung des n-ten Kindes Selektor:

Sie können den CSS-N-ten-Kind-Selektor verwenden, um auf ungerade oder gerade Zeilen abzuzielen. Zum Beispiel:

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

Diese Regel gestaltet alle ungeraden Zeilen im Tabellenkörper mit einem blauen Hintergrund und weißem Text.

Mit jQuery:

Alternativ können Sie JavaScript verwenden, um Zeilen dynamisch zu identifizieren und zu formatieren. Mit jQuery:

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

Dieser Code wählt alle ungeraden Zeilen aus und setzt ihre Hintergrundfarbe auf Schwarz und die Textfarbe auf Weiß.

Anwenden von Stilen auf das Tabellenelement:

Wenn Sie den Wechselfarbeffekt auf die gesamte Tabelle anwenden möchten, können Sie dies verwenden Ansatz:

<table class="alternate_color">
  ...
</table>

.alternate_color tr:nth-child(odd) {
  background-color: #f5f5f5;
}

In diesem Fall fügen Sie der Tabelle eine Klasse hinzu und die CSS-Regel zielt auf alle ungeraden Zeilen in dieser Tabelle ab.

Hinweis:Verwenden Die Klasse des Tabellenelements für abwechselnde Zeilenfarben kann bestehende Stilregeln beeinträchtigen, die auf die Tabelle angewendet werden. Daher wird im Allgemeinen bevorzugt, den Selektor für das n-te untergeordnete Element direkt auf dem tr-Element zu verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS und jQuery abwechselnde Zeilenfarben in HTML-Tabellen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!