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

Erzielen einer alternativen Farbgebung von Tabellenzeilen mit CSS

In HTML-Tabellen kann die Zuweisung abwechselnder Farben zu Zeilen die visuelle Attraktivität verbessern und die Daten besser lesbar machen. Dies kann entweder durch die Anwendung von CSS-Klassen auf einzelne tr-Elemente oder durch die Gestaltung des Tabellenelements selbst erreicht werden.

Verwendung von CSS-Klassen

Das bereitgestellte HTML und CSS nutzen CSS-Klassen (tr.d0 und tr .d1), um Zeilen einzufärben. Um Zeilen jedoch basierend auf ihrer Position in der Tabelle einzufärben, können wir den :nth-child-Selektor im tbody-Element nutzen. Zum Beispiel:

tbody tr:nth-child(2n+1) {
  background-color: #CC9999;
  color: black;
}
tbody tr:nth-child(2n) {
  background-color: #9999CC;
  color: black;
}

Tabellenstil verwenden

Alternativ können wir die gesamte Tabelle mithilfe des Tabellenelements gestalten. Um allen ungeraden Zeilen eine bestimmte Farbe zu geben, können wir das folgende CSS verwenden:

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

Verwendung von JavaScript (jQuery)

Ein anderer Ansatz beinhaltet die Verwendung von JavaScript (jQuery):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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