Hvordan filtrere tabellen i JavaScript

Mens du lager en stor HTML -tabell på siden, er det viktig å inkludere en filterfunksjonalitet for en bedre brukeropplevelse. For å gjøre dette, bruk JavaScript for å filtrere poster i en tabell ved å søke i en hvilken som helst tabellpost i en søkeboks. I tillegg gir JavaScript -koden færre kodelinjer for å fungere effektivt.

Dette blogginnlegget vil definere prosessen med å filtrere tabellen i JavaScript.

Hvordan filtrere tabellen i JavaScript?

La oss se et eksempel som forklarer hvordan du filtrerer en tabell i JavaScript.

Eksempel
Først må du lage en søkefelt i et HTML -dokument med "OnKeyup”Eiendom som kaller“FilterTableFunc ()”Når nøkkelen er utgitt:

Lage en tabell som lagrer ansattes data ved hjelp av

tagg, og tilordne en ID “Ansatt”:

Navn	E -post	Kjønn	Betegnelse	Sammenføyningsdato
John	[email protected]	Mann	CPA	5/5/2020
Stephen	[email protected]	Mann	Hrm	21/10/2020
Mari	[email protected]	Hunn	Hrm	16/05/2022
Rhonda	[email protected]	Mann	CFA	23/06/2022

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 filtrerer tabellens data basert på søk:

funksjon filtertableFunc ()
var filterResult = dokument.getElementById ("Søk").verdi.tolowercase ();
var tømmelig = dokument.getElementById ("Employedata");
var tr = tømmes.getElementsByTagName ("tr");
for (var i = 1; i < tr.length; i++)
tr [i].stil.display = "ingen";
const tdarray = tr [i].getElementsByTagName ("TD");
for (var j = 0; j -1)
tr [i].stil.display = "";
gå i stykker;

I den ovennevnte koden:

• Først definer en funksjon "FilterTableFunc ()”.
• Få tilgang til søkefeltet ved å bruke IDen “Søk”For å få den angitte verdien og konvertere den til en små bokstaver ved å bruke“Tolowercase ()”Metode.
• Få en henvisning til tabellen der filteroperasjonen vil bli utført ved hjelp av IDen "Ansatt”.
• Få deretter bordrappene ved å bruke "GetElementsByTagName”Metode.
• Itererer gjennom tabellen opp til lengden, få dataene for hver tabelloppføring, og sjekk om den lagrede verdien på tabellen er lik den søkte verdien. Hvis det er, så vis den.

Produksjon

Ovennevnte utgang indikerer at filteroperasjonen har blitt brukt på tabellen med suksess på tabellen.

Konklusjon

En tabell kan filtreres i JavaScript ved å iterere gjennom tabelldataene og returnere relevante data. Denne filtreringen gjøres gjennom en funksjon som kalles en bestemt hendelse. Denne tilnærmingen vil fungere på en slik måte at på identiske data som er lagt inn, blir de tilsvarende dataene fra tabellen hentet, uavhengig av sakens følsomhet i inngangstekstfeltet. Dette innlegget beskriver en tilnærming som kan brukes til å filtrere en tabell i JavaScript.