In questo articolo vedremo un esempio di applicazione DHTML(Dynamic HTML). Utilizzando Javascript per accedere al DOM, realizzeremo una tabella inizialmente vuota che, tramite un’apposita funzione richiamata da un bottone, verrà riempita riga per riga dall’utente.
L’applicazione si compone essenzialmente di una sola funzione; la quale genererà una nuova riga con un numero di celle pari al numero di colonne presenti nella tabella. Per ogni cella chiederà all’utente, tramite prompt, il testo da inserire.
In fondo all’articolo è possibile provare o scaricare il codice completo.

La funzione Javascript si chiamerà aggiungiRiga():

<script type='text/javascript'>
function aggiungiRiga(id_table){
     var table = document.getElementById(id_table);
     var tbody = table.getElementsByTagName('tbody')[0];
     var colonne = table.getElementsByTagName('th').length;	
     var tr = document.createElement('tr');
     for(var i=0; i<colonne; i++){
          var td = document.createElement('td');
          var tx = document.createTextNode(prompt("Inserisci testo per cella "+(i+1),""));
          td.appendChild(tx);
          tr.appendChild(td);
     }
     tbody.appendChild(tr);
}
</script>

Analizziamo brevemente la funzione che acquisice come parametro d’ingresso l’id della tabella:
– Preleviamo il riferimento alla tabella e al tbody
– Calcoliamo il numero di colonne presenti
– Cicliamo e per ogni cella nuova chiediamo da prompt il testo
– Nidifichiamo il testo nel td e il td nel tr
– Aggiungiamo la nuova riga tr nel tbody

Anche per chi è all’asciutto di DOM (elementi, nodi e child) non risulterà difficile comprendere il codice della funzione aggiungiRiga().
Infine vediamo il codice HTML che inizializza la tabella e fornisce il richiamo alla funzione:

<table border='2' id='my_table' class='tabella' cellspacing='0' cellpadding='0'>
	<thead><tr><th>INTESTAZIONE COLONNA 1</th><th>INTESTAZIONE COLONNA 2</th><th>INTESTAZIONE COLONNA 3</th></tr></thead>
	<tbody>
	<!-- IL BODY E' INIZIALMENTE VUOTO -->
	</tbody>
</table><br/>
<input type='button' value='Aggiungi riga' onClick="aggiungiRiga('my_table')" />

La tabella è molto semplice. Richiede essenzialmente un ID e la suddivisione in head e body (essenziale per il corretto funzionamento su Explorer). Possiamo aumentare il numero di colonne liberamente, sarà la funzione ad adattarsi ad essa.

Cliccando qui è possibile vedere in azione il codice. (abilitare l’apertura dei prompt)
Cliccando qui è possibile scaricare il codice.