Ta objava v spletnem dnevniku bo definirala postopek filtriranja tabele v JavaScriptu.
Kako filtrirati tabelo v JavaScriptu?
Oglejmo si primer, ki pojasnjuje, kako filtrirati tabelo v JavaScriptu.
Primer
Najprej ustvarite iskalno vrstico v dokumentu HTML z » onkeyup ' lastnost, ki kliče ' filterTableFunc() «, ko tipko spustite:
< vrsta vnosa = 'besedilo' id = 'Iskanje' onkeyup = 'filterTableFunc()' rezervirano mesto = 'Iskanje.....' >< št >< št >
Ustvarite tabelo, ki shranjuje podatke o zaposlenih z uporabo
< ID tabele = 'podatki zaposlenih' meja = '1' >
< tr >
< th > Ime th >
< th > E-naslov th >
< th > Spol th >
< th > Imenovanje th >
< th > Datum pridružitve th >
tr >
< tr >
< td > Janez td >
< td > Janez @ gmail. z td >
< td > moški td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stephen td >
< td > Stephen @ gmail. z td >
< td > moški td >
< td > HRM td >
< td > enaindvajset / 10 / 2020 td >
tr >
< tr >
< td > Velik td >
< td > mari78 @ gmail. z td >
< td > ženska td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > ronda12 @ hotmail. z td >
< td > moški td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
tabela >
Po izvedbi datoteke HTML bo rezultat videti takole:
Nato dodamo funkcionalnost tabeli filtrov. V datoteki skripta JavaScript ali oznaki uporabite spodnjo kodo, ki bo filtrirala podatke tabele na podlagi iskanja:
funkcijo filterTableFunc ( ) {
je bil filterResult = dokument. getElementById ( 'Iskanje' ) . vrednost . toLowerCase ( ) ;
je bil empTable = dokument. getElementById ( 'podatki zaposlenih' ) ;
je bil tr = empTable. getElementsByTagName ( 'tr' ) ;
za ( je bil jaz = 1 ; jaz < tr. dolžina ; jaz ++ ) {
tr [ jaz ] . stil . zaslon = 'noben' ;
konst tdArray = tr [ jaz ] . getElementsByTagName ( 'td' ) ;
za ( je bil j = 0 ; j - 1 ) {
tr [ jaz ] . stil . zaslon = '' ;
odmor ;
}
}
}
}
V zgornji kodi:
- Najprej definirajte funkcijo ' filterTableFunc() ”.
- Dostop do iskalne vrstice z njenim ID-jem ' Iskanje ', da dobite vneseno vrednost in jo pretvorite v male črke z uporabo' toLowerCase() ” metoda.
- Pridobite sklic na tabelo, kjer bo izvedena operacija filtra, z uporabo njenega ID-ja ' EmploeData ”.
- Nato pridobite vrstice tabele z uporabo ' getElementsByTagName ” metoda.
- Preglejte tabelo do njene dolžine, pridobite podatke za vsak vnos tabele in preverite, ali je shranjena vrednost tabele enaka iskani vrednosti. Če je, ga prikažite.
Izhod
Zgornji izhod označuje, da je bila operacija filtra uspešno uporabljena za tabelo.
Zaključek
Tabelo je mogoče filtrirati v JavaScriptu s ponavljanjem podatkov tabele in vrnitvijo ustreznih podatkov. To filtriranje se izvaja prek funkcije, ki jo kliče določen dogodek. Ta pristop bo deloval tako, da se ob enakih vnesenih podatkih pridobijo ustrezni podatki iz tabele, ne glede na občutljivost na velike in male črke v polju za vnos besedila. Ta objava opisuje pristop, ki ga je mogoče uporabiti za filtriranje tabele v JavaScriptu.