Schlagwort: alternating

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>