Простые таблицы фильтрации с помощью jQuery

Назад

Рассмотрим, как создать простую таблицу с фильтрацией данных. Для удобства и простоты будем использовать jQuery.

Пример работы ниже. Вы можете начать вводить данные вы будете заполнять нужные результаты. Вы можете отфильтровать сразу через все поля.

Демонстрация

Название
Фамилия
Отчество

Иван
Петров
В.

Василий
Иванов
Александрович

Иван
Иванов
В.

Питер
Петров
Александрович

Александр
Петров
В.

Создать таблицу с фильтрацией

Реализация очень простая. Вам нужно всего лишь вставить разметку, чтобы включить jQuery и скрипт.

HTML-код для таблицы

<стиль>
фильтр-таблица #{
ширина: 100%;
}
фильтр-таблица #й{
фон-цвет: #дадада;
}
#фильтр-таблица, тд, #фильтр-таблица е{
обивка: 5 пикселей;
границы вниз: 1px твердых #CCC;
}
</стиль>

<таблица ID=фильтр-стол»»>
на <тр>
<Th>имя</Th> можно
тег <Th>фамилия</й>
тег <Th>имя</Th> можно
</тр>
<тр класс=’стол-фильтры’>
<ТD>
<входной тип=»текст»/>
</ТD>
<ТD>
<входной тип=»текст»/>
</ТD>
<ТD>
<входной тип=»текст»/>
</ТD>
</тр>
<тр класс=’таблица-данные’>
<тд>Иван</ТD>
<тд>Петров</ТD>
<тд>В.</ТD>
</тр>
<тр класс=’таблица-данные’>
<тд>Василий</ТD>
<ТD>Смит</ТD>
<ТD>Александрович</ТD>
</тр>
<тр класс=’таблица-данные’>
<тд>Иван</ТD>
<ТD>Смит</ТD>
<тд>В.</ТD>
</тр>
<тр класс=’таблица-данные’>
<тд>Питер</ТD>
<тд>Петров</ТD>
<ТD>Александрович</ТD>
</тр>
<тр класс=’таблица-данные’>
<тд>Александр</ТD>
<тд>Петров</ТD>
<тд>В.</ТD>
</тр>
</таблица>

Я думаю, что это все просто для лучшего обзора, добавила немного в CSS.

раздел <script>
$(‘.таблица-фильтры ввода’).на(‘ввод’, функция () {
filterTable($(это).родители(‘таблица’));
});

filterTable функция($таблицы) {
ВАР $фильтр = $таблица.найти(‘.таблица-фильтры тд’);
ВАР $строки = $таблица.найти(‘.таблица-данные’);
$строк.каждый(функция (параметр rowindex) {
ВАР действует = истина;
$(этот).найти(‘тд’).каждый(функция (colIndex) {
если ($фильтрами.экв(colIndex).найти(‘вход’).функция val()) {
если ($(это).HTML-код().столоверчением().метод indexOf(
$фильтрами.экв(colIndex).найти(‘вход’).функция val().столоверчением()) == -1) {
допустимый = действительное && ложь;
}
}
});
если (действителен === правда) {
$(этот).в CSS(‘дисплей’, «);
} еще {
$(этот).в CSS(‘дисплей’, ‘нет’);
}
});
}
</скрипт>

Подключили библиотеку jQuery и сам скрипт. Не забывайте, что в JS скрипт должен прийти после HTML-разметки. Если у вас есть вопросы, пишите в комментариях