Tento blogový príspevok bude definovať proces filtrovania tabuľky v JavaScripte.
Ako filtrovať tabuľku v JavaScripte?
Pozrime sa na príklad vysvetľujúci, ako filtrovať tabuľku v JavaScripte.
Príklad
Najprv vytvorte vyhľadávací panel v dokumente HTML s „ onkeyup vlastnosť, ktorá sa nazýva „ filterTableFunc() “ po uvoľnení kľúča:
< typ vstupu = 'text' id = 'Vyhľadávanie' onkeyup = 'filterTableFunc()' zástupný symbol = 'Vyhľadávanie.....' < br < br >
Vytvorte tabuľku, ktorá ukladá údaje zamestnancov pomocou
< ID tabuľky = 'údaje o zamestnancoch' hranica = '1' >
< tr >
< th > názov th >
< th > Email th >
< th > rod th >
< th > Označenie th >
< th > Dátum pripojenia th >
tr >
< tr >
< td > John td >
< td > John @ gmail. s td >
< td > Muž td >
< td > CZA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Štefan td >
< td > Stephen @ gmail. s td >
< td > Muž td >
< td > HRM td >
< td > dvadsaťjeden / 10 / 2020 td >
tr >
< tr >
< td > Veľký td >
< td > mari78 @ gmail. s td >
< td > Žena td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. s td >
< td > Muž td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
tabuľky >
Po spustení súboru HTML bude výstup vyzerať takto:
Potom pridajte funkcie do tabuľky filtrov. V súbore skriptu JavaScript alebo značke použite nižšie uvedený kód, ktorý bude filtrovať údaje tabuľky na základe vyhľadávania:
funkciu filterTableFunc ( ) {
bol filterResult = dokument. getElementById ( 'Vyhľadávanie' ) . hodnotu . na malé písmená ( ) ;
bol empTable = dokument. getElementById ( 'údaje o zamestnancoch' ) ;
bol tr = empTable. getElementsByTagName ( 'tr' ) ;
pre ( bol i = 1 ; i < tr. dĺžka ; i ++ ) {
tr [ i ] . štýl . displej = 'žiadny' ;
konšt tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
pre ( bol j = 0 ; j - 1 ) {
tr [ i ] . štýl . displej = '' ;
prestávka ;
}
}
}
}
Vo vyššie uvedenom kóde:
- Najprv definujte funkciu ' filterTableFunc() “.
- Prístup k vyhľadávaciemu panelu pomocou jeho ID “ Vyhľadávanie “, aby ste získali zadanú hodnotu a previedli ju na malé písmená pomocou „ toLowerCase() “.
- Získajte odkaz na tabuľku, v ktorej sa operácia filtra vykoná pomocou jej id “ údaje o zamestnancovi “.
- Potom získajte riadky tabuľky pomocou „ getElementsByTagName “.
- Iterujte tabuľku až po jej dĺžku, získajte údaje pre každú položku tabuľky a skontrolujte, či sa uložená hodnota tabuľky rovná hľadanej hodnote. Ak áno, zobrazte ho.
Výkon
Vyššie uvedený výstup indikuje, že operácia filtra bola úspešne aplikovaná na tabuľku.
Záver
Tabuľku je možné filtrovať v JavaScripte opakovaním cez údaje tabuľky a vrátením relevantných údajov. Toto filtrovanie sa vykonáva prostredníctvom funkcie vyvolanej pri konkrétnej udalosti. Tento prístup bude fungovať tak, že na identických zadaných údajoch sa načítajú zodpovedajúce údaje z tabuľky bez ohľadu na veľkosť písmen vo vstupnom textovom poli. Tento príspevok popisuje prístup, ktorý možno použiť na filtrovanie tabuľky v JavaScripte.