Овај блог пост ће дефинисати процес филтрирања табеле у ЈаваСцрипт-у.
Како филтрирати табелу у ЈаваСцрипт-у?
Погледајмо пример који објашњава како да филтрирате табелу у ЈаваСцрипт-у.
Пример
Прво направите траку за претрагу у ХТМЛ документу са „ онкеиуп ” својство које назива „ филтерТаблеФунц() ” када се отпусти кључ:
< тип уноса = 'текст' ид = 'Претрага' онкеиуп = 'филтерТаблеФунц()' чувар места = 'Претрага.....' >< бр >< бр >
Креирајте табелу која чува податке о запосленима користећи <табле> означите и доделите ИД “ ЕмплоиееДата ”:
< ид табеле = 'емплоиееДата' граница = '1' >
< тр >
< тх > Име тх >
< тх > Емаил тх >
< тх > Пол тх >
< тх > Ознака тх >
< тх > Датум придруживања тх >
тр >
< тр >
< тд > Јохн тд >
< тд > јохн @ Гмаил. са тд >
< тд > Мушки тд >
< тд > ЦПА тд >
< тд > 5 / 5 / 2020 тд >
тр >
< тр >
< тд > Степхен тд >
< тд > Степхен @ Гмаил. са тд >
< тд > Мушки тд >
< тд > ХРМ тд >
< тд > двадесет један / 10 / 2020 тд >
тр >
< тр >
< тд > Велики тд >
< тд > мари78 @ Гмаил. са тд >
< тд > Женско тд >
< тд > ХРМ тд >
< тд > 16 / 05 / 2022 тд >
тр >
< тр >
< тд > Рхонда тд >
< тд > рхонда12 @ хотмаил. са тд >
< тд > Мушки тд >
< тд > ЦФА тд >
< тд > 23 / 06 / 2022 тд >
тр >
сто >
Након извршавања ХТМЛ датотеке, излаз ће изгледати овако:
Након тога, додајмо функционалност табели филтера. У датотеци ЈаваСцрипт скрипте или ознаци, користите код у наставку који ће филтрирати податке табеле на основу претраге:
функција филтерТаблеФунц ( ) {
био филтерРесулт = документ. гетЕлементБиИд ( 'Претрага' ) . вредност . тоЛоверЦасе ( ) ;
био емпТабле = документ. гетЕлементБиИд ( 'емплоиееДата' ) ;
био тр = емпТабле. гетЕлементсБиТагНаме ( 'тр' ) ;
за ( био и = 1 ; и < тр. дужина ; и ++ ) {
тр [ и ] . стил . приказ = 'ниједан' ;
конст тдАрраи = тр [ и ] . гетЕлементсБиТагНаме ( 'тд' ) ;
за ( био ј = 0 ; ј - 1 ) {
тр [ и ] . стил . приказ = '' ;
пауза ;
}
}
}
}
У горе наведеном коду:
- Прво дефинишите функцију ' филтерТаблеФунц() ”.
- Приступите траци за претрагу користећи њен ИД “ Претрага ” да бисте добили унету вредност и конвертовали је у мала слова користећи „ тоЛоверЦасе() ” метод.
- Добијте референцу на табелу у којој ће се извршити операција филтера користећи њен ИД “ ЕмплоиееДата ”.
- Затим узмите редове табеле користећи „ гетЕлементсБиТагНаме ” метод.
- Итерирајте табелу до њене дужине, узмите податке за сваки унос табеле и проверите да ли је сачувана вредност табеле једнака траженој вредности. Ако јесте, онда га прикажите.
Излаз
Горњи излаз показује да је операција филтера успешно примењена на табелу.
Закључак
Табела се може филтрирати у ЈаваСцрипт-у итерацијом кроз податке табеле и враћањем релевантних података. Ово филтрирање се врши преко функције која се позива на одређени догађај. Овај приступ ће функционисати на начин да се на идентичним унетим подацима преузимају одговарајући подаци из табеле, без обзира на осетљивост на велика и мала слова у пољу за унос текста. Овај пост описује приступ који се може користити за филтрирање табеле у ЈаваСцрипт-у.