Šiame tinklaraščio įraše bus apibrėžtas lentelės filtravimo JavaScript programoje procesas.
Kaip filtruoti lentelę „JavaScript“?
Pažiūrėkime pavyzdį, paaiškinantį, kaip filtruoti lentelę „JavaScript“.
Pavyzdys
Pirmiausia sukurkite paieškos juostą HTML dokumente su „ onkeyup nuosavybė, kuri vadinasi filtrasTableFunc() “, kai raktas atleidžiamas:
< įvesties tipas = 'tekstas' id = 'Paieška' onkeyup = 'filterTableFunc()' vietos rezervuaras = 'Paieška.....' >< br >< br >
Sukurkite lentelę, kurioje saugomi darbuotojų duomenys, naudodami
< lentelės ID = 'darbuotojo duomenys' siena = '1' >
< tr >
< th > vardas th >
< th > El. paštas th >
< th > Lytis th >
< th > Paskyrimas th >
< th > Įstojimo data th >
tr >
< tr >
< td > Jonas td >
< td > jonas @ gmail. su td >
< td > Patinas td >
< td > CPA td >
< td > 5 / 5 / 2020 m td >
tr >
< tr >
< td > Steponas td >
< td > Steponas @ gmail. su td >
< td > Patinas td >
< td > HRM td >
< td > dvidešimt vienas / 10 / 2020 m td >
tr >
< tr >
< td > Didelis td >
< td > mari78 @ gmail. su td >
< td > Moteris td >
< td > HRM td >
< td > 16 / 05 / 2022 m td >
tr >
< tr >
< td > Rhonda td >
< td > Rhonda12 @ hotmail. su td >
< td > Patinas td >
< td > CFA td >
< td > 23 / 06 / 2022 m td >
tr >
stalo >
Įvykdžius HTML failą, išvestis atrodys taip:
Po to pridėkime filtrų lentelės funkcijų. „JavaScript“ scenarijaus faile arba žymoje naudokite toliau pateiktą kodą, kuris filtruos lentelės duomenis pagal paiešką:
funkcija filtras TableFunc ( ) {
buvo filtras Rezultatas = dokumentas. getElementById ( 'Paieška' ) . vertė . į mažąsias raides ( ) ;
buvo tuščia lentelė = dokumentas. getElementById ( 'darbuotojo duomenys' ) ;
buvo tr = tuščia lentelė. getElementsByTagName ( 'tr' ) ;
dėl ( buvo i = 1 ; i < tr. ilgio ; i ++ ) {
tr [ i ] . stilius . ekranas = 'nė vienas' ;
konst tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
dėl ( buvo j = 0 ; j - 1 ) {
tr [ i ] . stilius . ekranas = '' ;
pertrauka ;
}
}
}
}
Aukščiau pateiktame kode:
- Pirmiausia apibrėžkite funkciją ' filtrasTableFunc() “.
- Pasiekite paieškos juostą naudodami jos ID ' Paieška “, norėdami gauti įvestą vertę ir konvertuoti ją į mažąsias raides naudodami „ mažosiomis raidėmis () “ metodas.
- Gaukite nuorodą į lentelę, kurioje bus atlikta filtro operacija naudojant jos ID ' darbuotojo duomenys “.
- Tada gaukite lentelės eilutes naudodami „ getElementsByTagName “ metodas.
- Pakartokite lentelę iki jos ilgio, gaukite kiekvieno lentelės įrašo duomenis ir patikrinkite, ar išsaugota lentelės reikšmė yra lygi ieškomai reikšmei. Jei taip, tada parodykite jį.
Išvestis
Aukščiau pateikta išvestis rodo, kad filtro operacija sėkmingai pritaikyta lentelei.
Išvada
Lentelę galima filtruoti naudojant „JavaScript“, kartojant lentelės duomenis ir pateikiant atitinkamus duomenis. Šis filtravimas atliekamas naudojant funkciją, iškviestą konkrečiam įvykiui. Šis metodas veiks taip, kad įvedant identiškus duomenis iš lentelės būtų paimami atitinkami duomenys, neatsižvelgiant į didžiųjų ir mažųjų raidžių jautrumą įvesties teksto lauke. Šiame įraše aprašomas metodas, kurį galima naudoti norint filtruoti „JavaScript“ lentelę.