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.