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

Mit CSS alternative Tabellenzeilenfarben erstellen

Abwechselnde Tabellenzeilenfarben verbessern die visuelle Attraktivität und Benutzerfreundlichkeit von HTML-Tabellen und machen sie einfacher lesen. So können Sie dies mit CSS erreichen:

• Verwenden der Tabellenklasse:

Sie können der Tabelle eine Klasse zuweisen und Stile auf sie anwenden Tabellenzeilen innerhalb dieser Klasse:

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

Dadurch wird die Hintergrundfarbe der ungeraden Nummern geändert Zeilen.

• Mit jQuery:

Mit jQuery können Sie die ungeraden Zeilen auswählen und formatieren dynamisch:

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

• nth-child:

Direkt im CSS-Stylesheet können Sie den nth-child-Selektor verwenden, um jedes anzusprechen andere Zeile:

tbody tr:nth-child(odd) {
  background-color: #CCCCCC;
}

Dadurch wird sichergestellt, dass nur die ungeradzahligen Zeilen den alternativen Hintergrund haben Farbe.

• Beispiel-HTML:

Hier ist ein HTML-Beispiel mit den oben genannten Methoden:

<table class="alternate_color">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>13</td>
    </tr>
  </tbody>
</table>

Durch Anwenden der Mit entsprechendem CSS können Sie ganz einfach Zebrastreifen in Ihrer Tabelle erstellen und so deren Lesbarkeit und Ästhetik verbessern.

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!