Această postare de blog va defini procesul de filtrare a tabelului în JavaScript.
Cum se filtrează tabelul în JavaScript?
Să vedem un exemplu care explică cum să filtrați un tabel în JavaScript.
Exemplu
Mai întâi, creați o bară de căutare într-un document HTML cu „ onkeyup ” proprietate care numește „ filterTableFunc() ” când cheia este eliberată:
< tip de introducere = 'text' id = 'căutare' onkeyup = „filterTableFunc()” substituent = 'Căutare.....' >< br >< br >
Creați un tabel care stochează datele angajaților folosind
< ID tabel = „Datele angajatului” frontieră = '1' >
< tr >
< th > Nume th >
< th > E-mail th >
< th > Gen th >
< th > Desemnare th >
< th > Data aderării th >
tr >
< tr >
< td > Ioan td >
< td > Ioan @ gmail. cu td >
< td > Masculin td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Ştefan td >
< td > stephen @ gmail. cu td >
< td > Masculin td >
< td > HRM td >
< td > douăzeci și unu / 10 / 2020 td >
tr >
< tr >
< td > Mari td >
< td > mari78 @ gmail. cu td >
< td > Femeie td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. cu td >
< td > Masculin td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
masa >
După executarea fișierului HTML, rezultatul va arăta astfel:
După aceea, să adăugăm funcționalitate la tabelul de filtrare. Într-un fișier script JavaScript sau o etichetă, utilizați codul de mai jos care va filtra datele tabelului pe baza căutării:
funcţie filterTableFunc ( ) {
a fost filterResult = document. getElementById ( 'căutare' ) . valoare . toLowerCase ( ) ;
a fost empTable = document. getElementById ( „Datele angajatului” ) ;
a fost tr = empTable. getElementsByTagName ( 'tr' ) ;
pentru ( a fost i = 1 ; i < tr. lungime ; i ++ ) {
tr [ i ] . stil . afişa = 'nici unul' ;
const tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
pentru ( a fost j = 0 ; j - 1 ) {
tr [ i ] . stil . afişa = '' ;
pauză ;
}
}
}
}
În codul de mai sus:
- Mai întâi, definiți o funcție „ filterTableFunc() ”.
- Accesați bara de căutare folosind id-ul său „ căutare ” pentru a obține valoarea introdusă și a o converti într-o literă mică folosind „ toLowerCase() ” metoda.
- Obțineți o referință la tabelul în care va fi efectuată operația de filtrare folosind id-ul său „ Datele angajatului ”.
- Apoi, obțineți rândurile tabelului folosind „ getElementsByTagName ” metoda.
- Iterați prin tabel până la lungimea acestuia, obțineți datele pentru fiecare intrare în tabel și verificați dacă valoarea stocată a tabelului este egală cu valoarea căutată. Dacă este, atunci afișați-l.
Ieșire
Ieșirea de mai sus indică faptul că operația de filtrare a fost aplicată cu succes la tabel.
Concluzie
Un tabel poate fi filtrat în JavaScript prin iterarea datelor din tabel și returnând datele relevante. Această filtrare se face printr-o funcție apelată la un anumit eveniment. Această abordare va funcționa în așa fel încât pe date identice introduse, datele corespunzătoare din tabel să fie preluate, indiferent de sensibilitatea majusculelor din câmpul de text de intrare. Această postare descrie o abordare care poate fi folosită pentru a filtra un tabel în JavaScript.