Добавлять имя класса для каждого второго ряда довольно утомительно, и вы не ошиблись, если задумались о наличии альтернативного решения той же самой задачи. Эффекта чередования можно достичь исключительно средствами CSS. Надо отметить, что этот метод гораздо эффективнее. Воспользовавшись селектором псевдокласса CSS3 :nth-child, можно выбрать все четные или нечетные ряды таблицы, ничего не меняя в HTML-разметке. Наступят времена, когда все броузеры будут поддерживать этот псевдокласс, и жизнь разработчиков на CSS станет гораздо проще. Понять механизм функционирования этого псевдокласса достаточно сложно, поэтому рекомендую вам обратиться к справочной документации CSS Reference, в которой он прекрасно представлен.

С помощью данного селектора псевдокласса можно выбирать элементы в зависимости от количества предшествующих ему элементов того же уровня.

Вернемся к изначальному коду таблицы до добавления имени класса для рядов. Можно обратиться ко всем четным рядам таблицы с помощью следующего CSS-кода:

.datatable tr:nth-child(2n) {
background-color: #DFE7F2;
color: #000000;
}

Для обращения ко всем нечетным рядам можно использовать следующий CSS-код:

.datatable tr:nth-child(2n+1) {
background-color: #E8EBEF;
color: #000000;
}

Содержащиеся в данном селекторе числовые выражения могут показаться замысловатыми, но, к счастью, разработчикам настолько часто приходится выполнять подобную задачу, что в спецификации CSS3 был описан более простой синтаксис. Вместо числовых выражений в скобках можно использовать ключевые слова:

  .datatable tr:nth-child(even) {
	background-color: #DFE7F2;
	color: #000000;
}
.datatable tr:nth-child(odd) {
	background-color: #E8EBEF;
	color: #000000;
}

Рис. 60. Чередование строк при  помощи CSS3

На момент написания данной книги эти примеры обрабатывались последними версиями Firefox, Opera, Chrome, Safari и IE9.

Вы можете проверить свой браузер, пройдя по ссылке.