Ce billet de blog définira le processus de filtrage de la table en JavaScript.
Comment filtrer le tableau en JavaScript ?
Voyons un exemple expliquant comment filtrer une table en JavaScript.
Exemple
Tout d'abord, créez une barre de recherche dans un document HTML avec le ' onkeyup ” propriété qui appelle le “ filterTableFunc() ” lorsque la touche est relâchée :
< type d'entrée = 'texte' identifiant = 'chercher' onkeyup = 'filterTableFunc()' espace réservé = 'Chercher.....' >< Br >< Br >
Créez une table qui stocke les données des employés à l'aide de la Après avoir exécuté le fichier HTML, la sortie ressemblera à ceci : Après cela, ajoutons des fonctionnalités à la table de filtrage. Dans un fichier de script JavaScript ou une balise, utilisez le code ci-dessous qui filtrera les données de la table en fonction de la recherche : Dans le code ci-dessus : Production La sortie ci-dessus indique que l'opération de filtrage a été appliquée avec succès à la table. Une table peut être filtrée en JavaScript en parcourant les données de la table et en renvoyant les données pertinentes. Ce filtrage s'effectue au travers d'une fonction appelée sur un événement spécifique. Cette approche fonctionnera de telle manière que sur des données identiques entrées, les données correspondantes de la table sont extraites, quelle que soit la sensibilité à la casse dans le champ de texte d'entrée. Cet article décrit une approche qui peut être utilisée pour filtrer une table en JavaScript. tag, et attribuez un identifiant ' EmployéDonnées ” :
< identifiant de table = 'EmployeeData' frontière = '1' >
< tr >
< e > Nom e >
< e > E-mail e >
< e > Le genre e >
< e > La désignation e >
< e > Date d'inscription e >
tr >
< tr >
< td > John td >
< td > Jean @ Gmail. avec td >
< td > Homme td >
< td > ACP td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Étienne td >
< td > stephen @ Gmail. avec td >
< td > Homme td >
< td > GRH td >
< td > vingt-et-un / dix / 2020 td >
tr >
< tr >
< td > Gros td >
< td > mari78 @ Gmail. avec td >
< td > Femelle td >
< td > GRH td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. avec td >
< td > Homme td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
table >
fonction filterTableFunc ( ) {
a été filtreRésultat = document. getElementById ( 'chercher' ) . évaluer . toLowerCase ( ) ;
a été empTable = document. getElementById ( 'EmployeeData' ) ;
a été tr = empTable. getElementsByTagName ( 'tr' ) ;
pour ( a été je = 1 ; je < tr. longueur ; je ++ ) {
tr [ je ] . style . affichage = 'rien' ;
constante tableautd = tr [ je ] . getElementsByTagName ( 'td' ) ;
pour ( a été j = 0 ; j - 1 ) {
tr [ je ] . style . affichage = '' ;
Pause ;
}
}
}
}
Conclusion