See ajaveebi postitus määratleb tabeli JavaScripti filtreerimise protsessi.
Kuidas tabelit JavaScriptis filtreerida?
Vaatame näidet, mis selgitab tabeli filtreerimist JavaScriptis.
Näide
Esmalt looge HTML-dokumendis otsinguriba ' onkeyup ' vara, mis kutsub ' filterTableFunc() ” kui võti vabastatakse:
< sisendi tüüp = 'tekst' id = 'otsing' onkeyup = 'filterTableFunc()' kohatäide = 'Otsing.....' >< br >< br >
Looge tabel, mis salvestab töötajate andmeid kasutades
< tabeli id = 'töötajaandmed' piir = '1' >
< tr >
< th > Nimi th >
< th > Meil th >
< th > Sugu th >
< th > Määramine th >
< th > Liitumise kuupäev th >
tr >
< tr >
< td > John td >
< td > John @ gmail. koos td >
< td > Mees td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stephen td >
< td > Stephen @ gmail. koos td >
< td > Mees td >
< td > HRM td >
< td > kakskümmend üks / 10 / 2020 td >
tr >
< tr >
< td > Suur td >
< td > mari78 @ gmail. koos td >
< td > Naine td >
< td > HRM td >
< td > 16 / 05 / 2022. aasta td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. koos td >
< td > Mees td >
< td > CFA td >
< td > 23 / 06 / 2022. aasta td >
tr >
laud >
Pärast HTML-faili käivitamist näeb väljund välja järgmine:
Pärast seda lisame filtritabelisse funktsioonid. JavaScripti skriptifailis või märgendis kasutage allolevat koodi, mis filtreerib tabeli andmed otsingu põhjal:
funktsiooni filterTableFunc ( ) {
oli filter Tulemus = dokument. getElementById ( 'otsing' ) . väärtus . väiketähtedega ( ) ;
oli empTable = dokument. getElementById ( 'töötajaandmed' ) ;
oli tr = empTable. getElementsByTagName ( 'tr' ) ;
jaoks ( oli i = 1 ; i < tr. pikkus ; i ++ ) {
tr [ i ] . stiilis . kuva = 'mitte ükski' ;
konst tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
jaoks ( oli j = 0 ; j - 1 ) {
tr [ i ] . stiilis . kuva = '' ;
murda ;
}
}
}
}
Ülaltoodud koodis:
- Esmalt määrake funktsioon ' filterTableFunc() ”.
- Juurdepääs otsinguribale selle ID abil otsing ', et saada sisestatud väärtus ja teisendada see väiketähtedeks, kasutades nuppu ' väiketähtedega() ” meetod.
- Hankige viide tabelile, kus filtri toiming selle ID abil tehakse ' töötaja andmed ”.
- Seejärel hankige tabeli read, kasutades ' getElementsByTagName ” meetod.
- Korrake tabelit kuni selle pikkuseni, hankige andmed iga tabelikirje kohta ja kontrollige, kas tabeli salvestatud väärtus on võrdne otsitud väärtusega. Kui on, siis kuvage see.
Väljund
Ülaltoodud väljund näitab, et filtri toiming on tabelisse edukalt rakendatud.
Järeldus
Tabelit saab JavaScriptis filtreerida, korrates tabeli andmeid ja tagastades asjakohased andmed. See filtreerimine toimub funktsiooni kaudu, mis kutsub esile konkreetse sündmuse. See lähenemine toimib nii, et sisestatud identsete andmete puhul tuuakse tabelist vastavad andmed, olenemata sisendtekstivälja tõstetundlikkusest. See postitus kirjeldab lähenemist, mida saab kasutada tabeli filtreerimiseks JavaScriptis.