Alternierende Hintergrundfarbe in einer Tabelle mit jQuery

Mit jQuery lässt sich eine Tabelle mit zeilenweise alternierender Hintergrundfarbe sehr einfach implementieren. Mit dem folgenden Code muss lediglich die Style-Klasse „alternating_row“ festgelegt werden:

Beispiel:

jQuery-Code:

$(document).ready(function()
{
  $("table.alternating_row tr:even").css("background-color", "#EBDDE2");
  $("table.alternating_row tr:odd").css("background-color", "#C8BBBE");
});

HTML-Code:

<table class="alternating_row">
    <tr>
        <th>Spalte 1</th>
        <th>Spalte 2</th>
        <th>Spalte 3</th>
        <th>Spalte 4</th>
    </tr>
    <tr>
        <td>Eintrag 1</td>
        <td>Eintrag 1</td>
        <td>Eintrag 1</td>
        <td>Eintrag 1</td>
    </tr>
    <tr>
        <td>Eintrag 2</td>
        <td>Eintrag 2</td>
        <td>Eintrag 2</td>
        <td>Eintrag 2</td>
    </tr>
    <tr>
        <td>Eintrag 3</td>
        <td>Eintrag 3</td>
        <td>Eintrag 3</td>
        <td>Eintrag 3</td>
    </tr>
    <tr>
        <td>Eintrag 4</td>
        <td>Eintrag 4</td>
        <td>Eintrag 4</td>
        <td>Eintrag 4</td>
    </tr>
</table>

5 Gedanken zu „Alternierende Hintergrundfarbe in einer Tabelle mit jQuery“

  1. Hallo,

    seit CSS3 braucht man dafür kein jQuery mehr.
    etwas in folgender Art reicht für’s Striping (oder, wie du so schön sagst, für die alternierenden Farben) aus:
    tr:nth-child(odd) {
    background-color: #99ff99;
    }

    Grüße,

    Sebastian

  3. Wenn du statt .style einfach .addClass(‚odd‘) benutzt und CSS in der CSS-Datei lässt ist es zusätzlich aufgeräumter und du kannst dir theoretisch auch (sofern du keine even-Klasse vergibst, weil das ja der default Zustand einer Zeile sein könnte) DOM-Operationen sparen.

Schreibe einen Kommentar