Comment filtrer la table en javascript

Lors de la création d'une grande table HTML sur la page, il est important d'inclure une fonctionnalité de filtre pour une meilleure expérience utilisateur. Pour ce faire, utilisez JavaScript pour filtrer les enregistrements dans une table en recherchant n'importe quel enregistrement de table dans une zone de recherche. De plus, le code JavaScript fournit moins de lignes de code pour fonctionner efficacement.

Ce billet de blog définira le processus de filtrage du tableau en javascript.

Comment filtrer la table 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 clé est publiée:

Créer un tableau qui stocke les données des employés à l'aide du

Tag, et attribuez un ID "Employeedata»:

Nom	E-mail	Genre	Désignation	Date d'inscription
John	John @ gmail.com	Homme	CPA	5/5/2020
Stephen	Stephen @ Gmail.com	Homme	GRH	21/10/2020
Mari	mari78 @ gmail.com	Femme	GRH	16/05/2022
Rhonda	rhonda12 @ hotmail.com	Homme	CFA	23/06/2022

Après avoir exécuté le fichier HTML, la sortie ressemblera à ceci:

Après cela, ajoutons des fonctionnalités à la table de filtre. 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:

fonction filterTableFunc ()
var filterResult = document.GetElementByid ("Search").valeur.TolowerCase ();
var videable = document.GetElementByid ("Employeedata");
var tr = vide.getElementsByTagName ("tr");
pour (var i = 1; i < tr.length; i++)
tri].style.affiche = "aucun";
const tdarray = tr [i].getElementsByTagName ("TD");
pour (var j = 0; j -1)
tri].style.display = "";
casser;

Dans le code donné ci-dessus:

• Tout d'abord, définissez une fonction "filterTableFunc ()".
• Accéder à la barre de recherche en utilisant son identifiant "recherche«Pour obtenir la valeur saisie et la convertir en minuscules en utilisant le«TolowerCase ()" méthode.
• Obtenez une référence au tableau où l'opération de filtre sera effectuée à l'aide de son ID "Employeedata".
• Ensuite, obtenez les lignes de table en utilisant le «getElementsbytagname" méthode.
• Itérez dans la table jusqu'à sa longueur, obtenez les données pour chaque entrée de table et vérifiez si la valeur stockée du tableau est égale à la valeur recherchée. Si c'est le cas, alors affichez-le.

Sortir

La sortie ci-dessus indique que l'opération de filtre a été appliquée avec succès au tableau.

Conclusion

Un tableau peut être filtré en JavaScript en itérant les données du tableau et en renvoyant les données pertinentes. Ce filtrage se fait via une fonction appelée un événement spécifique. Cette approche fonctionnera de telle manière que sur les données identiques saisies, les données correspondantes du tableau sont récupérées, quelle que soit la sensibilité des cas dans le champ de texte d'entrée. Cet article décrit une approche qui peut être utilisée pour filtrer un tableau en JavaScript.