Wielu początkujących webmasterów (w tym kiedyś ja :)) chcąc kolorować co drugi wiersz tabeli wykorzystuje do tego celu klasy. Pomysł sam w sobie nie jest zły, jednak przypisywanie co drugiemu wierszowi nowego atrybutu może być monotonne, albo po prost brzydkie z punktu widzenia kodu źródłowego. Istnieje bardzo prosty sposób, aby osiągnąć ten sam efekt szybciej i ładniej, mając jednocześnie większą kontrolę nad sposobem prezentacji danych.
Tabela źródłowa
Będziemy starali się pokolorować poniższą tabelę. Dla urozmaicenia zajmiemy się wierszami parzystymi, jak i nieparzystymi za jednym razem.
[codesyntax lang=”html4strict”]
<table> <tr> <td> Jestem komórką ! </td> </tr> <tr> <td> Jestem komórką ! </td> </tr> <tr> <td> Jestem komórką ! </td> </tr> <tr> <td> Jestem komórką ! </td> </tr> <tr> <td> Jestem komórką ! </td> </tr> <tr> <td> Jestem komórką ! </td> </tr> </table>
[/codesyntax]
Pseudoselektor w CSS
Język CSS posiada bardzo przydatną opcję, pseudoselektor :ntd-child(n). Jako parametr przyjmuje on wartość numeryczną wraz z predefiniowaną zmienną n, która odzwierciedla pozycję danego elementu w drzewie DOM. Przykładowo zapis (n) będzie oznaczać każdy element, a (3n+1) co trzeci, zaczynając od drugiego
[codesyntax lang=”css”]
tr:nth-child(2n) { background-color: green; } tr:nth-child(2n+1) { background-color: gray; }
[/codesyntax]
Mały skrypt w jQuery
W jQuery sprawa wygląda jeszcze prościej. Mamy tu bowiem do dyspozycji dwa selektory – :even (parzysty), oraz :odd (nieparzysty).
[codesyntax lang=”javascript”]
$(document).ready(function() { $('tr:even').css('background-color', 'gray'); $('tr:odd').css('background-color', 'green'); });
[/codesyntax]