Dette blogginnlegget vil definere prosessen med å filtrere tabellen i JavaScript.
Hvordan filtrere tabell i JavaScript?
La oss se et eksempel som forklarer hvordan du filtrerer en tabell i JavaScript.
Eksempel
Først oppretter du en søkefelt i et HTML-dokument med ' onkeyup ' eiendom som kaller ' filterTableFunc() ' når nøkkelen slippes:
< inndatatype = 'tekst' id = 'Søk' onkeyup = 'filterTableFunc()' plassholder = 'Søk.....' >< br >< br >
Lag en tabell som lagrer ansattes data ved å bruke
< tabell-ID = 'ansattdata' grense = '1' >
< tr >
< th > Navn th >
< th > E-post th >
< th > Kjønn th >
< th > Betegnelse th >
< th > Tilmeldingsdato th >
tr >
< tr >
< td > John td >
< td > john @ gmail. med td >
< td > Mann td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stephen td >
< td > stephen @ gmail. med td >
< td > Mann td >
< td > HRM td >
< td > tjueen / 10 / 2020 td >
tr >
< tr >
< td > Stor td >
< td > mari78 @ gmail. med td >
< td > Hunn td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. med td >
< td > Mann td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
bord >
Etter å ha utført HTML-filen, vil utdataene se slik ut:
Etter det, la oss legge til funksjonalitet til filtertabellen. I en JavaScript-skriptfil eller en tag, bruk koden nedenfor som vil filtrere tabellens data basert på søk:
funksjon filterTableFunc ( ) {
var filterResultat = dokument. getElementById ( 'Søk' ) . verdi . til LowerCase ( ) ;
var empTable = dokument. getElementById ( 'ansattdata' ) ;
var tr = empTable. getElementsByTagName ( 'tr' ) ;
til ( var Jeg = 1 ; Jeg < tr. lengde ; Jeg ++ ) {
tr [ Jeg ] . stil . vise = 'ingen' ;
konst tdArray = tr [ Jeg ] . getElementsByTagName ( 'td' ) ;
til ( var j = 0 ; j - 1 ) {
tr [ Jeg ] . stil . vise = '' ;
gå i stykker ;
}
}
}
}
I koden ovenfor:
- Først, definer en funksjon ' filterTableFunc() '.
- Få tilgang til søkefeltet ved å bruke dens id ' Søk ' for å få den angitte verdien og konvertere den til en liten bokstav ved å bruke ' toLowerCase() 'metoden.
- Få en referanse til tabellen der filteroperasjonen skal utføres ved å bruke dens id ' ansattdata '.
- Få deretter tabellradene ved å bruke ' getElementsByTagName 'metoden.
- Iterer gjennom tabellen opp til dens lengde, få dataene for hver tabelloppføring, og sjekk om den lagrede verdien av tabellen er lik den søkte verdien. Hvis det er det, så vis det.
Produksjon
Ovennevnte utdata indikerer at filteroperasjonen har blitt brukt på tabellen.
Konklusjon
En tabell kan filtreres i JavaScript ved å iterere gjennom tabelldataene og returnere de relevante dataene. Denne filtreringen gjøres gjennom en funksjon som kalles på en spesifikk hendelse. Denne tilnærmingen vil fungere på en slik måte at på identiske data som legges inn, hentes tilsvarende data fra tabellen, uavhengig av store og små bokstaver i inntastingstekstfeltet. Dette innlegget beskriver en tilnærming som kan brukes til å filtrere en tabell i JavaScript.