Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Ricerca in tabella html

In un articolo precedente abbiamo analizzato uno script Javascript che ci permetteva di inserire righe in maniera dinamica in una tabella html preesistente.
In questo nuovo articolo realizzeremo alcune funzioni che ci aiuteranno a ricercare un valore o una stringa all’interno di una tabella.
Utilizzando il DOM, accederemo alle singole celle che compongono la tabella e qualora il contenuto sia uguale al valore cercato evidenzieremo la cella con un colore differente.
Ad esempio può risultare molto utile, in presenza di grandi tabelle contenenti dati di varia natura, fornire all’utente un form tramite il quale effettuare ricerche su tutti i dati o in alternativa su una singola colonna.

Realizzeremo quindi tre funzioni:
– Cercare un valore in tabella (ricercaInTable)
– Cercare un valore in una singola colonna della tabella (ricercaInCol)
– Ripristinare lo stato iniziale della tabella (ripristinaTable)

In fondo all’articolo è possibile provare o scaricare il codice completo.

Vediamo subito il codice Javascript:

// FUNZIONE PER RICERCA IN TABELLA
function ricercaInTable(id_table){
     ripristinaTable(id_table);
     var valore = document.ricerca.campo.value;
     var table = document.getElementById(id_table);
     var celle = table.getElementsByTagName('td');
     var contatore = 0;
     for(var j=0; j<celle.length; j++){
          if(celle[j].innerHTML==valore){
               celle[j].className='trovato';
               contatore++;
          }
     }
     document.getElementById('responso').innerHTML='Trovati: '+contatore;
}

// FUNZIONE PER RICERCA IN SINGOLA COLONNA DI TABELLA
function ricercaInCol(id_table,colonna){
     ripristinaTable(id_table);
     var valore = document.ricerca.campo.value;
     var table = document.getElementById(id_table);
     var n_colonne = table.getElementsByTagName('th').length;
     var celle = table.getElementsByTagName('td');
     var contatore = 0;
     for(var j=(colonna-1); j<celle.length; j=(j+n_colonne)){
          if(celle[j].innerHTML==valore){
               celle[j].className='trovato';
	  contatore++;
          }
     }
     document.getElementById('responso').innerHTML='Trovati: '+contatore;
}

// FUNZIONE CHE RIPRISTINA LO STILE INIZIALE DELLA TABELLA
function ripristinaTable(id_table){
     var table = document.getElementById(id_table);
     var celle = table.getElementsByTagName('td');
     for(var j=0; j<celle.length; j++){	
          celle[j].className='default';
     }	
     document.getElementById('responso').innerHTML='';
}

Innanzitutto chiariamo alcuni concetti che ci aiutino a comprendere il codice:
– La tabella ha uno stile di defaul tramite CSS
– Un ciclo for ci permette di ciclare su tutte le celle <td> della tabella
– Il valore contenuto nella cella viene confrontato con quello ricercato
– Quando un valore viene trovato la cella corrispondete cambia il suo stile

La funzione ricercaInTable acquisisce come parametro un id tabella.
Innanzitutto preleviamo da un form html il testo da ricercare:
var valore = document.ricerca.campo.value;
Dopo aver identificato la tabella, otteniamo l’array contenente tutti gli elementi con nome tag <td>:
var celle = table.getElementsByTagName(‘td’);
Ciclando su questo array verifichiamo il contenuto della cella:
if(celle[j].innerHTML==valore){…
Se la condizione è verificata allora cambia lo stile della cella:
celle[j].className=’trovato’;

La funzione che permette la ricerca su una singola colonna prenderà come parametro un valore numerico per identificare la colonna da esaminare.
Se ad esempio volessimo cercare un valore nella terza colonna della tabella id_table:

ricercaInCol('id_table',3);

La funzione ricercaInCol opera come la funzione ricercaInTable con l’unica differenza che esamina solo le celle che (tramite opportuno incremento dell’indice) ricadono nella colonna in esame.
Infine la funzione ripristinaTable ha il compito di riportare la tabella allo stile iniziale prima di effettuare una nuova ricerca.

Vediamo ora il codice CSS utilizzato:

th.intestazione{
     background-color:#0000FF;
     color:#FFFFFF;
     font-weight:bold;
     padding:3px;
}

td.default{
     background-color:#7FFFD4;
}

td.trovato{
     background-color:#FF0000;
     font-weight:bold;
}

Il td.default è utilizzato per tutte le celle della tabella mentre td.trovato è lo stile applicato solo alle celle il cui valore corrisponde con quello ricercato.

Infine è necessario logicamente realizzare una tabella html e richiamare le funzioni tramite un form.

Il codice proposto è da intendersi esclusivamente come la base per realizzare una ricerca in una tabella html. Le metodologie di ricerca e gli stili sono perfezionabili.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×