Šis emuāra ziņojums definēs tabulas filtrēšanas procesu JavaScript.
Kā filtrēt tabulu JavaScript?
Apskatīsim piemēru, kurā paskaidrots, kā filtrēt tabulu JavaScript.
Piemērs
Vispirms HTML dokumentā izveidojiet meklēšanas joslu ar “ onkeyup 'īpašums, kas saucas ' filtrsTableFunc() Kad atslēga tiek atlaista:
< ievades veids = 'teksts' id = 'Meklēt' onkeyup = 'filterTableFunc()' vietturis = 'Meklēt.....' >< br >< br >
Izveidojiet tabulu, kurā tiek glabāti darbinieku dati, izmantojot
< tabulas id = 'darbinieku dati' robeža = '1' >
< tr >
< th > Vārds th >
< th > E-pasts th >
< th > Dzimums th >
< th > Apzīmējums th >
< th > Pievienošanās datums th >
tr >
< tr >
< td > Džons td >
< td > Džons @ gmail. ar td >
< td > Vīrietis td >
< td > CPA td >
< td > 5 / 5 / 2020. gads td >
tr >
< tr >
< td > Stīvens td >
< td > Stefans @ gmail. ar td >
< td > Vīrietis td >
< td > HRM td >
< td > divdesmitviens / 10 / 2020. gads td >
tr >
< tr >
< td > Liels td >
< td > mari78 @ gmail. ar td >
< td > Sieviete td >
< td > HRM td >
< td > 16 / 05 / 2022. gads td >
tr >
< tr >
< td > Ronda td >
< td > rhonda12 @ Hotmail. ar td >
< td > Vīrietis td >
< td > CFA td >
< td > 23 / 06 / 2022. gads td >
tr >
tabula >
Pēc HTML faila izpildes izvade izskatīsies šādi:
Pēc tam pievienosim filtru tabulai funkcionalitāti. JavaScript skripta failā vai tagā izmantojiet tālāk norādīto kodu, kas filtrēs tabulas datus, pamatojoties uz meklēšanu.
funkciju filtrs TableFunc ( ) {
bija filtrs Rezultāts = dokumentu. getElementById ( 'Meklēt' ) . vērtību . mazajiem burtiem ( ) ;
bija empTable = dokumentu. getElementById ( 'darbinieku dati' ) ;
bija tr = empTable. getElementsByTagName ( 'tr' ) ;
priekš ( bija i = 1 ; i < tr. garums ; i ++ ) {
tr [ i ] . stils . displejs = 'neviens' ;
konst tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
priekš ( bija j = 0 ; j - 1 ) {
tr [ i ] . stils . displejs = '' ;
pārtraukums ;
}
}
}
}
Iepriekš norādītajā kodā:
- Vispirms definējiet funkciju ' filtrsTableFunc() ”.
- Piekļūstiet meklēšanas joslai, izmantojot tās ID ' Meklēt ”, lai iegūtu ievadīto vērtību un pārvērstu to par mazajiem burtiem, izmantojot “ mazie burti () ” metode.
- Iegūstiet atsauci uz tabulu, kurā tiks veikta filtra darbība, izmantojot tās ID ' darbinieka dati ”.
- Pēc tam iegūstiet tabulas rindas, izmantojot ' getElementsByTagName ” metode.
- Atkārtojiet tabulu līdz tās garumam, iegūstiet datus par katru tabulas ierakstu un pārbaudiet, vai tabulas saglabātā vērtība ir vienāda ar meklēto vērtību. Ja tā ir, parādiet to.
Izvade
Iepriekš minētā izvade norāda, ka filtra darbība ir veiksmīgi piemērota tabulai.
Secinājums
Tabulu var filtrēt JavaScript, atkārtojot tabulas datus un atgriežot attiecīgos datus. Šī filtrēšana tiek veikta, izmantojot funkciju, kas izsaukta konkrētam notikumam. Šī pieeja darbosies tā, ka par identiskiem ievadītajiem datiem tiek iegūti atbilstošie dati no tabulas neatkarīgi no reģistrjutības ievades teksta laukā. Šajā ziņojumā ir aprakstīta pieeja, ko var izmantot, lai filtrētu tabulu JavaScript.