Тази публикация в блога ще дефинира процеса на филтриране на таблицата в JavaScript.
Как да филтрирам таблица в JavaScript?
Нека видим пример, обясняващ как да филтрирате таблица в JavaScript.
Пример
Първо създайте лента за търсене в HTML документ с „ onkeyup ”, което извиква „ filterTableFunc() ”, когато ключът бъде освободен:
< тип вход = 'текст' документ за самоличност = 'Търсене' onkeyup = 'filterTableFunc()' контейнер = 'Търсене.....' >< бр >< бр >
Създайте таблица, която съхранява данни за служители, като използвате <таблица> етикет и задайте идентификатор „ Данни за служителите ”:
< идентификатор на таблица = 'данни за служители' граница = '1' >
< тр >
< th > Име th >
< th > електронна поща th >
< th > Пол th >
< th > Обозначаване th >
< th > Дата на присъединяване th >
тр >
< тр >
< td > Джон td >
< td > Джон @ gmail. с td >
< td > Мъжки td >
< td > CPA td >
< td > 5 / 5 / 2020 г td >
тр >
< тр >
< td > Стивън td >
< td > Стефан @ gmail. с td >
< td > Мъжки td >
< td > HRM td >
< td > двадесет и едно / 10 / 2020 г td >
тр >
< тр >
< td > Голям td >
< td > мари78 @ gmail. с td >
< td > Женски пол td >
< td > HRM td >
< td > 16 / 05 / 2022 г td >
тр >
< тр >
< td > Ронда td >
< td > ронда12 @ hotmail. с td >
< td > Мъжки td >
< td > CFA td >
< td > 23 / 06 / 2022 г td >
тр >
маса >
След изпълнение на HTML файла изходът ще изглежда така:
След това нека добавим функционалност към филтърната таблица. Във файл на JavaScript скрипт или маркер използвайте кода по-долу, който ще филтрира данните на таблицата въз основа на търсене:
функция filterTableFunc ( ) {
беше filterResult = документ. getElementById ( 'Търсене' ) . стойност . toLowerCase ( ) ;
беше empTable = документ. getElementById ( 'данни за служители' ) ;
беше тр = empTable. getElementsByTagName ( 'tr' ) ;
за ( беше аз = 1 ; аз < тр. дължина ; аз ++ ) {
тр [ аз ] . стил . дисплей = 'нито един' ;
конст tdArray = тр [ аз ] . getElementsByTagName ( 'td' ) ;
за ( беше й = 0 ; й - 1 ) {
тр [ аз ] . стил . дисплей = '' ;
прекъсване ;
}
}
}
}
В горния код:
- Първо, дефинирайте функция ' filterTableFunc() ”.
- Достъп до лентата за търсене, като използвате нейния идентификатор „ Търсене ”, за да получите въведената стойност и да я преобразувате в малки букви с помощта на „ toLowerCase() ” метод.
- Получете препратка към таблицата, където ще се извърши филтърната операция, като използвате нейния идентификатор „ Данни за служителите ”.
- След това вземете редовете на таблицата, като използвате „ getElementsByTagName ” метод.
- Преминете през таблицата до нейната дължина, вземете данните за всеки запис в таблицата и проверете дали съхранената стойност на таблицата е равна на търсената стойност. Ако е така, покажете го.
Изход
Горният изход показва, че филтърната операция е приложена успешно към таблицата.
Заключение
Таблица може да бъде филтрирана в JavaScript чрез итериране на данните от таблицата и връщане на съответните данни. Това филтриране се извършва чрез функция, извикана при конкретно събитие. Този подход ще работи по такъв начин, че при въведени идентични данни се извличат съответните данни от таблицата, независимо от чувствителността към главни и малки букви в полето за въвеждане на текст. Тази публикация описва подход, който може да се използва за филтриране на таблица в JavaScript.