Tento blogový příspěvek bude definovat proces filtrování tabulky v JavaScriptu.
Jak filtrovat tabulku v JavaScriptu?
Podívejme se na příklad vysvětlující, jak filtrovat tabulku v JavaScriptu.
Příklad
Nejprve vytvořte vyhledávací panel v dokumentu HTML s „ onkeyup vlastnost, která se nazývá filterTableFunc() “ při uvolnění klíče:
< Typ vstupu = 'text' id = 'Vyhledávání' onkeyup = 'filterTableFunc()' zástupný symbol = 'Vyhledávání.....' < br < br >
Vytvořte tabulku, která ukládá data zaměstnanců pomocí
< ID tabulky = 'údaje o zaměstnancích' okraj = '1' >
< tr >
< čt > název čt >
< čt > E-mailem čt >
< čt > Rod čt >
< čt > Označení čt >
< čt > Datum připojení čt >
tr >
< tr >
< td > John td >
< td > John @ gmail. s td >
< td > mužský td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Štěpáne td >
< td > Stephen @ gmail. s td >
< td > mužský td >
< td > HRM td >
< td > dvacet jedna / 10 / 2020 td >
tr >
< tr >
< td > Velký td >
< td > mari78 @ gmail. s td >
< td > ženský td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. s td >
< td > mužský td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
stůl >
Po spuštění souboru HTML bude výstup vypadat takto:
Poté do tabulky filtrů přidáme funkce. V souboru skriptu JavaScript nebo ve značce použijte níže uvedený kód, který bude filtrovat data tabulky na základě vyhledávání:
funkce filterTableFunc ( ) {
byl filterResult = dokument. getElementById ( 'Vyhledávání' ) . hodnota . na malá písmena ( ) ;
byl empTable = dokument. getElementById ( 'údaje o zaměstnancích' ) ;
byl tr = empTable. getElementsByTagName ( 'tr' ) ;
pro ( byl i = 1 ; i < tr. délka ; i ++ ) {
tr [ i ] . styl . Zobrazit = 'žádný' ;
konst tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
pro ( byl j = 0 ; j - 1 ) {
tr [ i ] . styl . Zobrazit = '' ;
přestávka ;
}
}
}
}
Ve výše uvedeném kódu:
- Nejprve definujte funkci ' filterTableFunc() “.
- Přístup k vyhledávacímu panelu pomocí jeho ID “ Vyhledávání “, abyste získali zadanou hodnotu a převedli ji na malá písmena pomocí „ toLowerCase() “ metoda.
- Získejte odkaz na tabulku, kde bude operace filtru provedena pomocí jejího id “ zaměstnanecká data “.
- Poté získejte řádky tabulky pomocí „ getElementsByTagName “ metoda.
- Iterujte tabulku až do její délky, získejte data pro každý záznam tabulky a zkontrolujte, zda se uložená hodnota tabulky rovná hledané hodnotě. Pokud ano, zobrazte jej.
Výstup
Výše uvedený výstup indikuje, že operace filtru byla úspěšně aplikována na tabulku.
Závěr
Tabulku lze filtrovat v JavaScriptu iterací dat tabulky a vrácením příslušných dat. Toto filtrování se provádí pomocí funkce volané při konkrétní události. Tento přístup bude fungovat tak, že na identických zadaných datech se načtou odpovídající data z tabulky, bez ohledu na velikost písmen ve vstupním textovém poli. Tento příspěvek popisuje přístup, který lze použít k filtrování tabulky v JavaScriptu.