Come creare una tabella con ricerca – HTML&JS

In questa guida imparerai a realizzare una tabella HTML con filtro di ricerca dei record all’interno delle celle, con il sistema di ricerca programmato con JavaScript.

Quando si ha a che fare con numerosi dati, elencati in una tabella HTML di un sito web, potrebbe risultare comodo avere un elemento di input di testo dove poter effettuare una ricerca, in base alle lettere digitate.

Può sembrare una funzione basilare, ma per i meno esperti può risultare complicato anche solo adattare lo script alle proprie pagine.

Per utilizzare questa funzione faremo uso di JavaScript, insieme ad una comune tabella HTML, indifferentemente da quante colonne o righe sia composta.

Consiglio a chiunque voglia seguire questa guida di accertarsi di avere le giuste conoscenze di HTML. JavaScript non è richiesto nel caso non si è interessati a capire lo script (consiglio comunque di informarsi bene e magari seguire il nostro corso gratuito di JS).

Puoi trovare ulteriori funzioni utili per il tuo sito web qui.

Tabella HTML con ricerca JavaScript

In HTML è possibile realizzare tabelle molto facilmente, in cui inserire qualsiasi tipo di dato all’interno di ogni cella. Nel caso in cui una tabella dovesse contenere una grande quantità di informazioni, può rivelarsi utile avere uno strumento associato per la ricerca tramite la digitazione di parole chiave.

tabella html con ricerca esempio

Lo script che andremo a vedere servirà proprio a questo, con poche righe di codice JavaScript potremmo programmare un filtro con un sistema di ricerca applicata in un elemento “input” HTML, che dopo la digitazione dei caratteri, farà mostrare esclusivamente le righe (row) corrispondenti.

Prima di iniziare a spiegare lo script, è necessario costruire una tabella HTML. Se già ne hai creata una nella tua pagina web, salta il prossimo passaggio.

HTML

La tabella che costruiremo in HTML sarà davvero semplice, quel tanto che basta perché contenga alcuni dati da poter ricercare con il futuro script.

Leggi come creare una tabella in HTML.

Oltre la tabella bisogna definire anche l’area di input del testo di ricerca, tramite il comune tag “input“.

Il codice:

<label for="ricerca">Cerca:</label>

<input type="text" id="ricerca"  onkeyup="cerca()" name="ricerca" placeholder="Cerca..."><br/><br/>
<table id="tabella">
  <tr>
    <th>Nome pietanza</th>
    <th>Tipologia</th>
    <th>Prezzo</th>
  </tr>
  <tr>
    <td>Spaghetti alla carbonara</td>
    <td>Primo piatto</td>
    <td>€6,50</td>
  </tr>
  <tr>
    <td>Petto di pollo</td>
    <td>Secondo</td>
    <td>€5,00</td>
  </tr>
  <tr>
    <td>Patate al forno</td>
    <td>Contorno</td>
    <td>€3,00</td>
  </tr>
  <tr>
    <td>Tiramisù</td>
    <td>Dolce</td>
    <td>€3,50</td>
  </tr>
  <tr>
    <td>Birra alla spina</td>
    <td>Bevanda</td>
    <td>€3,50</td>
  </tr>
</table> 

Nell’esempio abbiamo ipotizzato una tabella contenente una breve lista di pietanze con tipologia e prezzo, tu puoi cambiare come preferisci.

Puoi notare che nel campo input è definita una funzione JavaScript chiamata “cerca()” , che si attiva con l’evento “onkeyup“, cioè ogni qual volta venga rilasciato un pulsante dalla tastiera.

JavaScript

Come ultimo step per programmare la nostra tabella, non resta che integrare lo script JS a fondo pagina. Nello specifico la funzione “cerca()” vista anche nel paragrafo precedente.

Il codice:

function cerca() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("ricerca");
  filter = input.value.toUpperCase();
  table = document.getElementById("tabella");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

Lo script prende i dati dall’elemento con selettore idricerca” e ricerca i valori digitati all’interno delle celle della prima colonna della tabella (con id “tabella“).

Assicurati che gli id degli elementi HTML corrispondano a quelli presenti nello script.

Copia e incolla la funzione JavaScript a fondo pagina nel documento .html, tra i tag <script> e </script>. Altrimenti puoi incollarla in un file .js esterno creato appositamente e integrarlo successivamente.

Il codice è un estratto della guida di w3schools.com, in caso di dubbi ti invitiamo a visitare anche il loro sito web.

Risultato

Qui il risultato del codice per creare una tabella con sistema di ricerca (generato da Codewith.it). Puoi testare il funzionamento nell’area destra.

In questa finestra interattiva sono state aggiunte anche delle regole CSS per rendere più piacevole la tabella alla vista. Copia il codice e modificalo come preferisci.

Leggi anche: Copiare testo negli appunti da pulsante HTML&JS

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

CAPTCHA