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.
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
tr:nth-child(2n) {
background-color: green;
}
tr:nth-child(2n+1) {
background-color: gray;
}
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).
$(document).ready(function() {
$('tr:even').css('background-color', 'gray');
$('tr:odd').css('background-color', 'green');
});