Ovaj blog će definirati proces filtriranja tablice u JavaScriptu.
Kako filtrirati tablicu u JavaScriptu?
Pogledajmo primjer koji objašnjava kako filtrirati tablicu u JavaScriptu.
Primjer
Najprije izradite traku za pretraživanje u HTML dokumentu s ' onkeyup ' svojstvo koje poziva ' filterTableFunc() ” kada se tipka otpusti:
< vrsta unosa = 'tekst' iskaznica = 'traži' onkeyup = 'filterTableFunc()' rezerviranog mjesta = 'Traži.....' >< br >< br >
Napravite tablicu koja pohranjuje podatke o zaposlenicima pomoću
< id tablice = 'Podaci o zaposleniku' granica = '1' >
< tr >
< th > Ime th >
< th > E-mail th >
< th > Spol th >
< th > Oznaka th >
< th > Datum pridruženja th >
tr >
< tr >
< td > Ivan td >
< td > Ivan @ gmail. s td >
< td > Muški td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stjepan td >
< td > Stjepan @ gmail. s td >
< td > Muški td >
< td > HRM td >
< td > dvadeset i jedan / 10 / 2020 td >
tr >
< tr >
< td > Velik td >
< td > mari78 @ gmail. s td >
< td > Žena td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. s td >
< td > Muški td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
stol >
Nakon izvođenja HTML datoteke, izlaz će izgledati ovako:
Nakon toga, dodajmo funkcionalnost tablici filtera. U datoteci JavaScript skripte ili oznaci upotrijebite donji kod koji će filtrirati podatke tablice na temelju pretraživanja:
funkcija filterTableFunc ( ) {
bio je filterRezultat = dokument. getElementById ( 'traži' ) . vrijednost . malim slovima ( ) ;
bio je isprazniTablica = dokument. getElementById ( 'Podaci o zaposleniku' ) ;
bio je tr = isprazniTablica. getElementsByTagName ( 'tr' ) ;
za ( bio je ja = 1 ; ja < tr. duljina ; ja ++ ) {
tr [ ja ] . stil . prikaz = 'ništa' ;
konst tdArray = tr [ ja ] . getElementsByTagName ( 'td' ) ;
za ( bio je j = 0 ; j - 1 ) {
tr [ ja ] . stil . prikaz = '' ;
pauza ;
}
}
}
}
U gore navedenom kodu:
- Prvo definirajte funkciju ' filterTableFunc() ”.
- Pristup traci za pretraživanje koristeći njen ID ' traži ' da dobijete unesenu vrijednost i pretvorite je u mala slova koristeći ' malim slovima() ” metoda.
- Nabavite referencu na tablicu u kojoj će se izvršiti operacija filtriranja koristeći njen ID ' podatci zaposlenika ”.
- Zatim dohvatite retke tablice pomoću ' getElementsByTagName ” metoda.
- Iterirajte kroz tablicu do njezine duljine, dohvatite podatke za svaki unos u tablici i provjerite je li pohranjena vrijednost tablice jednaka traženoj vrijednosti. Ako jest, onda ga prikažite.
Izlaz
Gornji izlaz označava da je operacija filtra uspješno primijenjena na tablicu.
Zaključak
Tablica se može filtrirati u JavaScriptu iteracijom kroz podatke tablice i vraćanjem relevantnih podataka. Ovo se filtriranje vrši pomoću funkcije koja se poziva na određeni događaj. Ovaj pristup će funkcionirati na način da se na identične unesene podatke dohvaća odgovarajući podatak iz tablice, bez obzira na osjetljivost na velika i mala slova u tekstualnom polju za unos. Ovaj post opisuje pristup koji se može koristiti za filtriranje tablice u JavaScriptu.