Wie erstelle ich Zebrastreifen in HTML-Tabellen mit CSS und JavaScript?

So wenden Sie alternative Tabellenzeilenfarben mit CSS und JavaScript an

In Ihrem HTML können Sie Klassen verwenden, um alternative Zeilenfarben anzuwenden, z Du hast es demonstriert. Sie möchten den Stil jedoch auf den Tabellencontainer selbst anwenden und nicht auf jede einzelne Zeile. CSS-Selektoren bieten eine Möglichkeit, dies zu erreichen.

Um den Tabellenzeilen Zebrastreifen zu verleihen, können Sie die Pseudoklasse :nth-child(odd) verwenden. Dieser Selektor zielt auf jede ungerade Zeile im Tabellenkörper (). Anschließend können Sie auf diese ungeraden Zeilen Stile anwenden, z. B. eine andere Hintergrund- und Textfarbe.

Mit jQuery

Wenn Sie lieber JavaScript verwenden, können Sie es verwenden die jQuery-Bibliothek. Mit jQuery können Sie alle ungeraden Zeilen in der Tabelle auswählen und mit der Funktion css() das gewünschte Styling anwenden.

Beispiel HTML:

<table border="1">
  <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>

CSS:

tbody td {
  padding: 30px;
}

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

jQuery:

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

Mit diesen Mit diesen Methoden können Sie mithilfe von CSS ganz einfach alternative Tabellenzeilenfarben erstellen und so eine optisch ansprechende Darstellung Ihrer Daten gewährleisten.

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