Ang post sa blog na ito ay tutukuyin ang proseso ng pag-filter ng talahanayan sa JavaScript.
Paano I-filter ang Talahanayan sa JavaScript?
Tingnan natin ang isang halimbawa na nagpapaliwanag kung paano mag-filter ng talahanayan sa JavaScript.
Halimbawa
Una, lumikha ng isang search bar sa isang HTML na dokumento na may ' onkeyup ” ari-arian na tinatawag na “ filterTableFunc() ” kapag inilabas ang susi:
< uri ng input = 'text' id = 'paghahanap' onkeyup = 'filterTableFunc()' placeholder = 'Hanapin.....' >< br >< br >
Gumawa ng talahanayan na nag-iimbak ng data ng empleyado gamit ang
< table id = 'employeeData' hangganan = '1' >
< tr >
< ika > Pangalan ika >
< ika > Email ika >
< ika > Kasarian ika >
< ika > Pagtatalaga ika >
< ika > Petsa ng Pagsali ika >
tr >
< tr >
< td > John td >
< td > si john @ gmail. kasama td >
< td > Lalaki td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stephen td >
< td > si stephen @ gmail. kasama td >
< td > Lalaki td >
< td > HRM td >
< td > dalawampu't isa / 10 / 2020 td >
tr >
< tr >
< td > Malaki td >
< td > mari78 @ gmail. kasama td >
< td > Babae td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. kasama td >
< td > Lalaki td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
mesa >
Pagkatapos i-execute ang HTML file, magiging ganito ang output:
Pagkatapos nito, magdagdag tayo ng functionality sa talahanayan ng filter. Sa isang JavaScript script file o isang tag, gamitin ang code sa ibaba na magpi-filter sa data ng talahanayan batay sa paghahanap:
function filterTableFunc ( ) {
ay filterResulta = dokumento. getElementById ( 'paghahanap' ) . halaga . saLowerCase ( ) ;
ay empTable = dokumento. getElementById ( 'employeeData' ) ;
ay tr = empTable. getElementsByTagName ( 'tr' ) ;
para sa ( ay i = 1 ; i < tr. haba ; i ++ ) {
tr [ i ] . istilo . display = 'wala' ;
const tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
para sa ( ay j = 0 ; j - 1 ) {
tr [ i ] . istilo . display = '' ;
pahinga ;
}
}
}
}
Sa ibinigay na code sa itaas:
- Una, tukuyin ang isang function ' filterTableFunc() ”.
- I-access ang search bar gamit ang id nito ' paghahanap ” para makuha ang inilagay na value at i-convert ito sa lowercase gamit ang “ toLowerCase() ” paraan.
- Kumuha ng sanggunian sa talahanayan kung saan isasagawa ang operasyon ng filter gamit ang id nito ' empleyadoData ”.
- Pagkatapos, kunin ang mga hilera ng talahanayan gamit ang “ getElementsByTagName ” paraan.
- Ulitin ang talahanayan hanggang sa haba nito, kunin ang data para sa bawat entry sa talahanayan, at tingnan kung ang nakaimbak na halaga ng talahanayan ay katumbas ng hinanap na halaga. Kung ito ay, pagkatapos ay ipakita ito.
Output
Ang output sa itaas ay nagpapahiwatig na ang operasyon ng filter ay matagumpay na nailapat sa talahanayan.
Konklusyon
Maaaring i-filter ang isang talahanayan sa JavaScript sa pamamagitan ng pag-ulit sa data ng talahanayan at pagbabalik ng nauugnay na data. Ginagawa ang pag-filter na ito sa pamamagitan ng isang function na tinatawag sa isang partikular na kaganapan. Ang diskarte na ito ay gagana sa paraang sa magkatulad na data na ipinasok, ang kaukulang data mula sa talahanayan ay kinukuha, anuman ang sensitivity ng case sa field ng input ng text. Ang post na ito ay naglalarawan ng isang diskarte na maaaring magamit upang i-filter ang isang talahanayan sa JavaScript.