Kolorowanie co drugiego wiersza w CSS i jQuery

Lis 15
2012

KolorowanieWielu 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.

<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>

 

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;
}

DEMO

 

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');
});

DEMO

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *