Tämä blogiviesti määrittelee taulukon suodatusprosessin JavaScriptissä.
Kuinka suodattaa taulukko JavaScriptissä?
Katsotaanpa esimerkkiä, joka selittää taulukon suodattamisen JavaScriptissä.
Esimerkki
Luo ensin hakupalkki HTML-dokumenttiin ' onkeyup ' kiinteistö, joka kutsuu ' filterTableFunc() ' kun avain vapautetaan:
< syötteen tyyppi = 'teksti' id = 'Hae' onkeyup = 'filterTableFunc()' paikanpitäjä = 'Hae.....' >< br >< br >
Luo taulukko, joka tallentaa työntekijätiedot käyttämällä
< taulukon tunnus = 'työntekijätiedot' rajaa = '1' >
< tr >
< th > Nimi th >
< th > Sähköposti th >
< th > Sukupuoli th >
< th > Nimitys th >
< th > Liittymispäivämäärä th >
tr >
< tr >
< td > John td >
< td > John @ gmail. kanssa td >
< td > Uros td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stephen td >
< td > Stephen @ gmail. kanssa td >
< td > Uros td >
< td > HRM td >
< td > kaksikymmentäyksi / 10 / 2020 td >
tr >
< tr >
< td > Iso td >
< td > mari78 @ gmail. kanssa td >
< td > Nainen td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Rhonda td >
< td > rhonda12 @ hotmail. kanssa td >
< td > Uros td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
pöytä >
Kun HTML-tiedosto on suoritettu, tulos näyttää tältä:
Lisätään sen jälkeen toimintoja suodatintaulukkoon. Käytä JavaScript-komentosarjatiedostossa tai -tunnisteessa alla olevaa koodia, joka suodattaa taulukon tiedot haun perusteella:
toiminto filterTableFunc ( ) {
oli suodatinTulos = asiakirja. getElementById ( 'Hae' ) . arvo . pienellä kirjaimella ( ) ;
oli empTable = asiakirja. getElementById ( 'työntekijätiedot' ) ;
oli tr = empTable. getElementsByTagName ( 'tr' ) ;
varten ( oli i = 1 ; i < tr. pituus ; i ++ ) {
tr [ i ] . tyyli . näyttö = 'ei mitään' ;
konst tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
varten ( oli j = 0 ; j - 1 ) {
tr [ i ] . tyyli . näyttö = '' ;
tauko ;
}
}
}
}
Yllä annetussa koodissa:
- Määritä ensin funktio ' filterTableFunc() ”.
- Käytä hakupalkkia sen tunnuksella ' Hae ' saadaksesi syötetyn arvon ja muuntaa se pieniksi käyttämällä ' pienet kirjaimet() ”menetelmä.
- Hanki viittaus taulukkoon, jossa suodatintoiminto suoritetaan sen tunnuksella ' työntekijätiedot ”.
- Hanki sitten taulukon rivit käyttämällä ' getElementsByTagName ”menetelmä.
- Iteroi taulukkoa sen pituuteen saakka, hanki tiedot jokaisesta taulukkomerkinnästä ja tarkista, onko taulukon tallennettu arvo yhtä suuri kuin haettu arvo. Jos on, näytä se.
Lähtö
Yllä oleva tulos osoittaa, että suodatintoiminto on otettu onnistuneesti käyttöön taulukossa.
Johtopäätös
Taulukko voidaan suodattaa JavaScriptissä iteroimalla taulukon tiedot ja palauttamalla asiaankuuluvat tiedot. Tämä suodatus tehdään tietyn tapahtuman kutsuvan funktion kautta. Tämä lähestymistapa toimii siten, että identtisillä syötetyillä tiedoilla noudetaan vastaavat tiedot taulukosta riippumatta syöttötekstikentän kirjainherkkyydestä. Tämä viesti kuvaa lähestymistapaa, jota voidaan käyttää taulukon suodattamiseen JavaScriptissä.