In deze blogpost wordt het proces van het filteren van de tabel in JavaScript beschreven.
Hoe tabel filteren in JavaScript?
Laten we een voorbeeld bekijken waarin wordt uitgelegd hoe een tabel in JavaScript kan worden gefilterd.
Voorbeeld
Maak eerst een zoekbalk in een HTML-document met de ' onkeyup ” eigenschap die de “ filterTableFunc() ” wanneer de sleutel wordt losgelaten:
< invoertype = 'tekst' ID kaart = 'zoeken' onkeyup = 'filterTableFunc()' tijdelijke aanduiding = 'Zoeken.....' >< br >< br >
Maak een tabel waarin werknemersgegevens worden opgeslagen met behulp van de
< tabel-id = 'werknemergegevens' grens = '1' >
< tr >
< e > Naam e >
< e > E-mail e >
< e > Geslacht e >
< e > Aanduiding e >
< e > Toetredingsdatum e >
tr >
< tr >
< td > John td >
< td > John @ gmail. met td >
< td > Mannelijk td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stefanus td >
< td > stephen @ gmail. met td >
< td > Mannelijk td >
< td > HRM td >
< td > eenentwintig / 10 / 2020 td >
tr >
< tr >
< td > Groot td >
< td > mari78 @ gmail. met td >
< td > Vrouw td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhanda12 @ hotmail. met td >
< td > Mannelijk td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
tafel >
Na het uitvoeren van het HTML-bestand ziet de uitvoer er als volgt uit:
Laten we daarna functionaliteit toevoegen aan de filtertabel. Gebruik in een JavaScript-scriptbestand of een tag de onderstaande code die de gegevens van de tabel filtert op basis van zoekopdrachten:
functie filterTableFunc ( ) {
was filterresultaat = document. getElementById ( 'zoeken' ) . waarde . naar kleine letters ( ) ;
was leegTabel = document. getElementById ( 'werknemergegevens' ) ;
was tr = leegTabel. getElementsByTagName ( 'tr' ) ;
voor ( was i = 1 ; i < tr. lengte ; i ++ ) {
tr [ i ] . stijl . Scherm = 'geen' ;
const tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
voor ( was j = 0 ; j - 1 ) {
tr [ i ] . stijl . Scherm = '' ;
pauze ;
}
}
}
}
In de hierboven gegeven code:
- Definieer eerst een functie ' filterTableFunc() ”.
- Toegang tot de zoekbalk met behulp van de id ' zoeken ” om de ingevoerde waarde te krijgen en deze om te zetten in een kleine letter met behulp van de “ toLowerCase() ” methode.
- Verkrijg een verwijzing naar de tabel waar de filterbewerking zal worden uitgevoerd met behulp van de id ' werknemerData ”.
- Haal vervolgens de tabelrijen op met behulp van de ' getElementsByTagName ” methode.
- Doorloop de tabel tot de lengte, haal de gegevens op voor elke tabelinvoer en controleer of de opgeslagen waarde van de tabel gelijk is aan de gezochte waarde. Als dat zo is, laat het dan zien.
Uitgang
De bovenstaande uitvoer geeft aan dat de filterbewerking met succes is toegepast op de tabel.
Conclusie
Een tabel kan in JavaScript worden gefilterd door de tabelgegevens te herhalen en de relevante gegevens te retourneren. Dit filteren gebeurt via een functie die wordt aangeroepen voor een specifieke gebeurtenis. Deze aanpak werkt op een zodanige manier dat bij identiek ingevoerde gegevens de overeenkomstige gegevens uit de tabel worden opgehaald, ongeacht de hoofdlettergevoeligheid in het invoertekstveld. Dit bericht beschrijft een aanpak die kan worden gebruikt om een tabel in JavaScript te filteren.