На этом шаге мы рассмотрим способ выделения групп строк.
Эти манипуляции с четными и нечетными строками подготовили нас к реализации более сложных приемов. В особенно плотных таблицах даже чередование цвета строк может не помогать зацепиться взглядом за определенную строку, поэтому может оказаться предпочтительнее организовать чередование цвета на большем интервале строк. Например, в нашей таблице с заголовками новостей можно было бы организовать чередование, окрашивая одним цветом сразу по три строки.
На 18 шаге был представлен метод .filter(), позволяющий очень гибко выбирать элементы страницы. Вспомнив, что метод .filter() может принимать не только выражение селектора, но и функцию фильтрации, мы можем написать:
$(document).ready(function() {
$('table.striped tbody').each(function() {
$(this).find('tr:not(:has(th))').filter (function(index) {
return (index % 6) < 3;
}).addClass('odd');
});
});
Этот программный код добивается многого, несмотря на небольшой объем, поэтому рассмотрим его по частям.
Во-первых, мы, как и раньше, использовали метод .each(), чтобы отделить друг от друга группы строк. Нам необходимо, чтобы окрашивание чередующихся фрагментов, по три строки в каждом, начиналось заново после каждого подзаголовка, так что именно данный прием позволяет нам работать с одним сегментом таблицы за раз. Затем, как и в последнем примере, мы использовали метод .find(), чтобы выбрать все строки, не содержащие элементов <th> (то есть не являющиеся подзаголовками).
Теперь необходимо выбрать первые три элемента из полученного множества, пропустить следующие три элемента и так далее. Здесь в игру вступает метод .filter(). Функция фильтрации принимает аргумент, содержащий порядковый номер элемента внутри соответствующего набора, то есть номер строки в сегменте таблицы, с которой мы работаем. Элемент останется в наборе, если и только если наша функция фильтрации возвратит значение true.
Оператор деления по модулю (%) позволяет получить всю необходимую нам информацию. Выражение index % 6 вычисляет остаток от деления номера строки на число 6; если остаток равен 0, 1 или 2, строка помечается классом odd, если остаток равен 3, 4 или 5, строка помечается классом even.
Программный код, как видно из реализации, отмечает только нечетные (odd) группы строк. Чтобы применить класс even, мы можем написать другой фильтр, который будет использовать противоположное условие, или подойти к реализации более творчески:
$(document).ready(function() {
$('table.striped tbody').each(function() {
$(this).find('tr:not(:has(th))').addClass('even')
.filter (function(index) {
return (index % 6) < 3;
}).removeClass('even').addClass('odd');
});
});
Здесь мы сначала применяем класс even ко всем строкам, а затем удаляем его из тех строк, к которым применяется класс odd. Теперь в нашей таблице цветом выделяются чередующиеся группы, по три строки в каждой, причем выделение чередующихся групп начинается заново в каждом новом сегменте таблицы, как показано на рисунке 1.
Рис.1. Чередование окраски групп строк
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим интерактивное выделение строк.
