Come filtrare la tabella in javascript

Durante la creazione di una grande tabella HTML nella pagina, è importante includere una funzionalità di filtro per una migliore esperienza utente. Per fare ciò, utilizzare JavaScript per filtrare i record in una tabella cercando qualsiasi record di tabella in una casella di ricerca. Inoltre, il codice JavaScript fornisce meno righe di codice per funzionare in modo efficiente.

Questo post sul blog definirà il processo di filtraggio della tabella in JavaScript.

Come filtrare la tabella in javascript?

Vediamo un esempio che spiega come filtrare una tabella in JavaScript.

Esempio
Innanzitutto, crea una barra di ricerca in un documento HTML con "Onkeyup"Proprietà che chiama il"FilterTableFunc ()"Quando viene rilasciata la chiave:

Crea una tabella che memorizza i dati dei dipendenti utilizzando il

tag e assegna un ID "impiegato":

Nome	E-mail	Genere	Designazione	Data di iscrizione
John	[email protected]	Maschio	CPA	5/5/2020
Stefano	[email protected]	Maschio	HRM	21/10/2020
Mari	[email protected]	Femmina	HRM	16/05/2022
Rhonda	[email protected]	Maschio	CFA	23/06/2022

Dopo aver eseguito il file HTML, l'output sembrerà così:

Dopodiché, aggiungiamo funzionalità alla tabella del filtro. In un file di script JavaScript o un tag, utilizzare il codice seguente che filtrerà i dati della tabella in base alla ricerca:

funzione filterTableFunc ()
var filterResult = documento.getElementById ("Search").valore.tolowerCase ();
var emptable = documento.getElementById ("Employeedata");
var tr = emplable.getElementsByTagName ("TR");
per (var i = 1; i < tr.length; i++)
Tr [i].stile.display = "Nessuno";
const tdArray = TR [i].getElementsByTagName ("TD");
per (var j = 0; j -1)
Tr [i].stile.display = "";
rottura;

Nel codice sopra dato:

• Innanzitutto, definire una funzione "FilterTableFunc ()".
• Accedi alla barra di ricerca utilizzando il suo ID "ricerca"Per ottenere il valore inserito e convertirlo in un minuscolo usando il"tolowercase ()" metodo.
• Ottieni un riferimento alla tabella in cui l'operazione di filtro verrà eseguita utilizzando il suo ID "impiegato".
• Quindi, ottieni le righe della tabella usando "getElementsByTagname" metodo.
• Iterare attraverso la tabella fino alla sua lunghezza, ottenere i dati per ciascuna voce della tabella e verificare se il valore memorizzato della tabella è uguale al valore ricercato. Se lo è, allora visualizzalo.

Produzione

L'output di cui sopra indica che l'operazione di filtro è stata applicata correttamente alla tabella.

Conclusione

Una tabella può essere filtrata in JavaScript iterando tramite i dati della tabella e restituendo i dati pertinenti. Questo filtraggio viene eseguito attraverso una funzione chiamata su un evento specifico. Questo approccio funzionerà in modo tale che su dati identici inseriti, i dati corrispondenti dalla tabella vengono recuperati, indipendentemente dalla sensibilità al caso nel campo di testo di input. Questo post descrive un approccio che può essere utilizzato per filtrare una tabella in JavaScript.