Ez a blogbejegyzés meghatározza a táblázat JavaScriptben történő szűrésének folyamatát.
Hogyan lehet táblázatot szűrni JavaScriptben?
Lássunk egy példát, amely elmagyarázza, hogyan lehet szűrni egy táblázatot JavaScriptben.
Példa
Először hozzon létre egy keresősávot egy HTML dokumentumban a „ onkeyup ' ingatlan, amely a ' filterTableFunc() ” a kulcs elengedésekor:
< bemeneti típus = 'szöveg' id = 'keresés' onkeyup = 'filterTableFunc()' helykitöltő = 'Keresés.....' >< br >< br >
Hozzon létre egy táblát, amely az alkalmazottak adatait tárolja a
< táblázat id = 'munkavállalói adatok' határ = '1' >
< tr >
< th > Név th >
< th > Email th >
< th > Nem th >
< th > Kijelölés th >
< th > Csatlakozási dátum th >
tr >
< tr >
< td > János td >
< td > János @ gmail. val vel td >
< td > Férfi td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > István td >
< td > István @ gmail. val vel td >
< td > Férfi td >
< td > HRM td >
< td > huszonegy / 10 / 2020 td >
tr >
< tr >
< td > Nagy td >
< td > mari78 @ gmail. val vel td >
< td > Női td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. val vel td >
< td > Férfi td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
asztal >
A HTML-fájl végrehajtása után a kimenet így fog kinézni:
Ezt követően adjunk funkcionalitást a szűrőtáblához. JavaScript-szkriptfájlban vagy címkében használja az alábbi kódot, amely keresés alapján szűri a táblázat adatait:
funkció filterTableFunc ( ) {
volt filterResult = dokumentum. getElementById ( 'keresés' ) . érték . to LowCase ( ) ;
volt empTable = dokumentum. getElementById ( 'munkavállalói adatok' ) ;
volt tr = empTable. getElementsByTagName ( 'tr' ) ;
számára ( volt én = 1 ; én < tr. hossz ; én ++ ) {
tr [ én ] . stílus . kijelző = 'egyik sem' ;
const tdArray = tr [ én ] . getElementsByTagName ( 'td' ) ;
számára ( volt j = 0 ; j - 1 ) {
tr [ én ] . stílus . kijelző = '' ;
szünet ;
}
}
}
}
A fent megadott kódban:
- Először definiáljon egy függvényt ' filterTableFunc() ”.
- A keresősáv elérése az azonosítójával ' keresés ', hogy megkapja a beírt értéket, és kisbetűvé alakítsa a ' kisbetűs() ” módszerrel.
- Hivatkozás lekérése arra a táblázatra, ahol a szűrési művelet végrehajtásra kerül az azonosítójával ' munkavállalói adatok ”.
- Ezután kapja meg a táblázat sorait a ' getElementsByTagName ” módszerrel.
- Ismételje meg a táblázatot a hosszáig, szerezze be az adatokat minden táblabejegyzéshez, és ellenőrizze, hogy a tábla tárolt értéke megegyezik-e a keresett értékkel. Ha igen, akkor jelenítse meg.
Kimenet
A fenti kimenet azt jelzi, hogy a szűrőművelet sikeresen alkalmazásra került a táblázatban.
Következtetés
Egy tábla szűrhető JavaScriptben a táblázat adatainak iterációjával és a vonatkozó adatok visszaadásával. Ez a szűrés egy adott eseményre meghívott függvényen keresztül történik. Ez a megközelítés úgy fog működni, hogy azonos bevitt adatok esetén a rendszer a megfelelő adatokat kéri le a táblából, függetlenül a beviteli szövegmező kis- és nagybetűk érzékenységétől. Ez a bejegyzés egy olyan megközelítést ír le, amely használható egy táblázat szűrésére JavaScriptben.