Questo post del blog definirà il processo di filtraggio della tabella in JavaScript.
Come filtrare la tabella in JavaScript?
Vediamo un esempio che spiega come filtrare una tabella in JavaScript.
Esempio
Innanzitutto, crea una barra di ricerca in un documento HTML con ' onkeyup ” proprietà che chiamano “ filterTableFunc() ” al rilascio del tasto:
< tipo di ingresso = 'testo' id = 'ricerca' onkeyup = 'filterTableFunc()' segnaposto = 'Ricerca.....' >< fratello >< fratello >
Crea una tabella che memorizzi i dati dei dipendenti utilizzando il file
< id tabella = 'Dati dipendente' confine = '1' >
< tr >
< th > Nome th >
< th > E-mail th >
< th > Genere th >
< th > Designazione th >
< th > Data di adesione th >
tr >
< tr >
< td > John td >
< td > John @ gmail. insieme a td >
< td > Maschio td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Stefano td >
< td > Stefano @ gmail. insieme a td >
< td > Maschio td >
< td > Gestione delle risorse umane td >
< td > ventuno / 10 / 2020 td >
tr >
< tr >
< td > Grande td >
< td > mari78 @ gmail. insieme a td >
< td > Femmina td >
< td > Gestione delle risorse umane td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > Ronda td >
< td > ronda12 @ hotmail. insieme a td >
< td > Maschio td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
tavolo >
Dopo aver eseguito il file HTML, l'output sarà simile al seguente:
Successivamente, aggiungiamo funzionalità alla tabella dei filtri. In un file di script JavaScript o in un tag, utilizza il codice seguente che filtrerà i dati della tabella in base alla ricerca:
funzione filterTableFunc ( ) {
era filterRisultato = documento. getElementById ( 'ricerca' ) . valore . toLowerCase ( ) ;
era empTable = documento. getElementById ( 'Dati dipendente' ) ;
era tr = empTable. getElementsByTagName ( 'tr' ) ;
per ( era io = 1 ; io < tr. lunghezza ; io ++ ) {
tr [ io ] . stile . Schermo = 'nessuno' ;
cost tdArray = tr [ io ] . getElementsByTagName ( 'td' ) ;
per ( era j = 0 ; j - 1 ) {
tr [ io ] . stile . Schermo = '' ;
rompere ;
}
}
}
}
Nel codice sopra indicato:
- Innanzitutto, definisci una funzione ' filterTableFunc() ”.
- Accedi alla barra di ricerca usando il suo id “ ricerca ' per ottenere il valore immesso e convertirlo in minuscolo utilizzando ' toLowerCase() ' metodo.
- Ottieni un riferimento alla tabella in cui verrà eseguita l'operazione di filtro utilizzando il suo id ' employeeData ”.
- Quindi, ottieni le righe della tabella usando ' getElementsByTagName ' metodo.
- Scorri la tabella fino alla sua lunghezza, ottieni i dati per ogni voce della tabella e controlla se il valore memorizzato della tabella è uguale al valore cercato. Se lo è, mostralo.
Produzione
L'output precedente indica che l'operazione di filtro è stata applicata correttamente alla tabella.
Conclusione
Una tabella può essere filtrata in JavaScript scorrendo i dati della tabella e restituendo i dati rilevanti. Questo filtraggio viene eseguito tramite una funzione richiamata su un evento specifico. Questo approccio funzionerà in modo tale che su dati identici immessi, i dati corrispondenti dalla tabella vengano recuperati, indipendentemente dalla distinzione tra maiuscole e minuscole nel campo di testo di input. Questo post descrive un approccio che può essere utilizzato per filtrare una tabella in JavaScript.