В этой статье я покажу как с помощью метода filter() можно одной строчкой на jQuery превратить вашу обычную таблицу в таблицу-"зебру". Этот эффект часто используется на многих сайтах для того, чтобы таблицу было удобнее читать - ряды такой таблицы немного отличаются по цвету. Также мы научимся добавлять эффект наведения мышью на ряд нашей таблицы - при таком наведении цвет фона для ряда таблицы будет меняться, а при "уходе" мыши с ряда - цвет вернется в начальный.
1. HTML-разметка
Первым делом создадим какую-нибудь простую таблицу. Пусть для примера наша таблица содержит список продуктов и цену на них:
Как видим, в нашей таблице 5 строк, в каждой из которых описан продукт и его цена. Цвет фона таблицы - серый и ширина - на всю область. Далее - немного стилизуем нашу таблицу с помощью CSS.
2. Добавляем CSS-стили для таблицы
Сделаем так, чтобы для нашей таблицы был установлен шрифт "Tahoma" высотой 10 пунктов. Также для удобочитаемости содержимого таблицы увеличим отступы от границ ячеек внутрь до 5 пикселей. Шрифт заголовка таблицы сделаем полужирным.
Давайте разберемся, что здесь происходит. Первым делом идет селектор $("#products tbody > tr"). Мы обращаемся к нашей таблице по её ID - это делается с помощью селектора "#products", после чего мы указываем "tbody > tr". Такой селектор отбирает все элементы <TR>, то есть ряды нашей таблицы, которые содержатся внутри тега <TBODY>, т.е. тела нашей таблицы, которое, в свою очередь, содержится внутри таблицы с ID="products". Если вернуться к п.1, где представлена разметка нашей таблицы, то всё станет понятно - мы просто выбрали все ряды нашей таблицы. Далее мы применяем к набору, содержащему все ряды таблицы метод filter(), передавая ему в качестве параметра строку с псевдоселектором ":even". Это позволяет отфильтровать ряды таблицы и выбрать из них только те, которые являются чётными (в переводе с английского "even" значит "четный"). Далее, к уже отфильтрованным рядам таблицы мы применяем метод css(), который устанавливает динамически CSS-стиль для выбранных элементов. В методе css(), мы устанавливаем для отобранных предыдущим селектором filter() рядов цвет фона - в серый. Последним в цепочке вызовов идет добавление класса "even" к нашему набору рядов. Поскольку мы отфильтровали чётные ряды, нам желательно их как-то "пометить", т.е. сохранить признак чётности. Для этого мы и добавляем им класс "even".
Итак, мы одной строчкой на jQuery превратили нашу таблицу в таблицу-зебру! Ощутите мощь jQuery :) Давайте теперь посмотрим, как добавить к таблице красивый эффект наведения мыши - когда мы будем проводить мышью над рядом таблицы, цвет фона этого ряда изменится. Такой эффект добавляет динамику в таблицу и улучшает её читабельность. Итак, напишем следующий код:
А теперь немного пояснений. Мы, опять же, начинаем с того, что выбираем все ряды таблицы - этого нам помогает достичь селектор $("#products tbody > tr"). Далее мы "вешаем" на каждый отобранный ряд таблицы по два обработчика на события "наведение мышью на область" и "уход мыши из области". Эти обработчики - две последовательные функции, расположенные внутри hover(). Первая - это наведение на ряд, вторая, соответственно, уход мыши из области ряда таблицы. При наведении мы меняем цвет фона для ряда. А при уходе курсора из области ряда (вторая функция) - получаем "старый цвет" фона. Помните мы в первой строчке добавляли к каждому ряду класс "even"? Так вот, он нам здесь и пригодится. Если ряд имеет класс "even", значит он чётный и мы вернём для него один цвет - "#ddd", в противном случае вернём цвет "#eee". Далее - просто устанавливаем этот цвет в качестве фона для ряда.
Демо
Друзья, собственно, это всё. Привожу демонстрацию проделанной нами работы: