Этот пост в блоге определит процесс фильтрации таблицы в JavaScript.
Как отфильтровать таблицу в JavaScript?
Давайте посмотрим на пример, объясняющий, как фильтровать таблицу в JavaScript.
Пример
Сначала создайте панель поиска в HTML-документе с помощью « onkeyup ” свойство, которое вызывает “ filterTableFunc() ” при отпускании клавиши:
< тип ввода знак равно 'текст' я бы знак равно 'поиск' onkeyup знак равно 'ФильтрТаблица()' заполнитель знак равно 'Поиск.....' >< бр >< бр >
Создайте таблицу, в которой хранятся данные о сотрудниках, используя <таблица> пометить и присвоить идентификатор « данные сотрудника ”:
< идентификатор таблицы знак равно 'Данные сотрудника' граница знак равно '1' >
< тр >
< й > Имя й >
< й > Эл. адрес й >
< й > Пол й >
< й > Обозначение й >
< й > Дата вступления й >
тр >
< тр >
< тд > Джон тд >
< тд > Джон @ гмейл. с тд >
< тд > Мужской тд >
< тд > цена за конверсию тд >
< тд > 5 / 5 / 2020 тд >
тр >
< тр >
< тд > Стивен тд >
< тд > Стивен @ гмейл. с тд >
< тд > Мужской тд >
< тд > УЧР тд >
< тд > двадцать один / 10 / 2020 тд >
тр >
< тр >
< тд > Большой тд >
< тд > Мари78 @ гмейл. с тд >
< тд > женский тд >
< тд > УЧР тд >
< тд > 16 / 05 / 2022 тд >
тр >
< тр >
< тд > Ронда тд >
< тд > Ронда12 @ горячая почта. с тд >
< тд > Мужской тд >
< тд > CFA тд >
< тд > 23 / 06 / 2022 тд >
тр >
стол >
После выполнения файла HTML вывод будет выглядеть следующим образом:
После этого добавим функционал в таблицу фильтров. В файле сценария JavaScript или теге используйте приведенный ниже код, который будет фильтровать данные таблицы на основе поиска:
функция filterTableFunc ( ) {
был filterРезультат знак равно документ. получитьэлементбиид ( 'поиск' ) . ценность . в нижнем регистре ( ) ;
был пустая таблица знак равно документ. получитьэлементбиид ( 'Данные сотрудника' ) ;
был тр знак равно пустая таблица. getElementsByTagName ( 'тр' ) ;
за ( был я знак равно 1 ; я < тр. длина ; я ++ ) {
тр [ я ] . стиль . отображать знак равно 'никто' ;
константа tdArray знак равно тр [ я ] . getElementsByTagName ( 'тд' ) ;
за ( был Дж знак равно 0 ; Дж - 1 ) {
тр [ я ] . стиль . отображать знак равно '' ;
ломать ;
}
}
}
}
В приведенном выше коде:
- Во-первых, определите функцию « filterTableFunc() ».
- Получите доступ к панели поиска, используя ее идентификатор « поиск », чтобы получить введенное значение и преобразовать его в нижний регистр с помощью « в нижний регистр() метод.
- Получить ссылку на таблицу, где будет выполняться операция фильтрации по ее id» данные сотрудника ».
- Затем получите строки таблицы, используя « getElementsByTagName метод.
- Переберите таблицу до ее длины, получите данные для каждой записи таблицы и проверьте, равно ли сохраненное значение таблицы искомому значению. Если есть, то покажите.
Выход
Приведенный выше вывод указывает на то, что операция фильтрации была успешно применена к таблице.
Вывод
Таблицу можно фильтровать в JavaScript, перебирая данные таблицы и возвращая соответствующие данные. Эта фильтрация выполняется с помощью функции, вызываемой при определенном событии. Этот подход будет работать таким образом, что при идентичных введенных данных извлекаются соответствующие данные из таблицы, независимо от чувствительности к регистру в текстовом поле ввода. В этом посте описывается подход, который можно использовать для фильтрации таблицы в JavaScript.