Javascript: inserire ed eliminare righe ed altri oggetti in una tabella

Un piccolo pezzo di codice di un’applicazione web che ho realizzato qualche tempo fa, che prevedeva l’inserimento e la cancellazione a runtime di nuove righe in una tabella.

Il punto di partenza è una riga di una table, con due colonne, come questa:

Cliccando sul si ottiene il seguente effetto: viene creata una nuova riga, sempre di due colonne, e nella seconda colonna viene creata una lista (ul) contenente tre elementi. Nell’esempio che ho riportato qui vengono create 5 righe ed in ognuna di queste una lista di 3 elementi. Il risultato è questo:

Nella riga originaria il viene sostituito con il , e la funzione javascrit associata al click sul viene creata al volo.

Le funzioni utilizzate per la creazione di nuovo elementi sono:

• document.createElement: crea un elemento dom all’interno del Document
• document.createTextNode: crea il contenuto di un nodo
• insertRow: metodo di TABLE che inserisce una nuova riga in una determinata posizione
• deleteRow: motodo di TABLE per rimuovere una riga in una determinata posizione

Partiamo dall’html. La tabella è scritta in questo modo:

<table id="tabella" class="datatable" border="0">
<tbody>
<tr id="tr_1" class="tr_sms">
<td id="td_1" class="testosms_piu" onclick="inserisciRiga(1)">ciao</td>
<td class="testosms">Io sono la prima riga della tabella</td>
</tr>
<tr id="tr_2" class="tr_sms">
<td id="td_2" class="testosms_piu" onclick="inserisciRiga(2)"></td>
<td class="testosms">Io sono la seconda riga della tabella</td>
</tr>
</tbody></table>

La funzione javascript inserisciRiga(x) accetta in ingresso la posizione della riga. In questo piccolo esempio è tutto statico, ma quando le righe sono generate dinamicamente (io per esempio ero all’interno di una jsp) l’indice viene anch’esso generato al volo. Da notare che l’id della riga deve essere tr_<indice> per poter poi essere recuperato del getElementById

Ecco com’è inserisciRiga:

function inserisciRiga(riga)
{
var numerorighe = 5;
var row = document.getElementById('tr_' + riga);
var posizione = row.rowIndex + 1;
for (i=0; i<5; i++) {
accoda(posizione + i, "Primo Elemento della lista", "Secondo elemento della lista", "Terzo elemento della lista");cambiaTestata(posizione, numerosms, riga);
}

Quindi, a partire dalla posizione indicata inserisco 5 righe, dove ogni riga consiste di una lista di 3 elementi. Nella versione orginale questa funzione è, in realtà, restituita da una chiamata Ajax, dove vengono specificate il numero di righe da inserire, il numero di elementi della lista ed il loro contenuto.

La funzione accoda è la seguente:

function accoda(position, campo1, campo2, campo3){// Recupero la tabella dal suo ID
var oTable = document.getElementById('tabella');// Creo la nuova riga e le assegno una classe
var oTr = oTable.insertRow(position);
oTr.className="altrow";// Creo le due colonne e imposto le classi
var oTd1=document.createElement("TD");
oTd1.className="sms_ico";
var oTd2=document.createElement("TD");
oTd2.className="sms";// Creo la lista UL e tutti i LI
var oUL = document.createElement("UL");
oUL.className="sms_lista";
var oLI_Campo1 = document.createElement("LI");
var oLI_Campo2 = document.createElement("LI");
var oLI_Campo3 = document.createElement("LI");

//Aggiungo il contenuto ai tre LI creati
var oText_Campo1 = document.createTextNode(campo1);
var oText_Campo2 = document.createTextNode(campo2);
var oText_Campo3 = document.createTextNode(campo3);

// Ora che ho creato tutti gli oggetti, li devo appendere ognuno
// dentro il relativo padre
oLI_Campo1.appendChild(oText_Campo1);
oLI_Campo2.appendChild(oText_Campo2);
oLI_Campo3.appendChild(oText_Campo3);
oUL.appendChild(oLI_Campo1);
oUL.appendChild(oLI_Campo2);
oUL.appendChild(oLI_Campo3)
oTd2.appendChild(oUL);
oTr.appendChild(oTd1);
oTr.appendChild(oTd2);

}

E’ tutto qui:

• Si recupera la tabella (document.getElementById(‘tabella’);)
• Si crea una nuova riga (oTable.insertRow(position);)
• Si creano tutti gli oggetti all’interno della riga (document.createElement, document.createTextNode)
• Si appendono tutti gli elementi alla nuova riga (appendChild)

Sia la sostituizione del con il , sia quella della funzione javascript da chiamare viene effettuata dalla funzione cambiaTestata:

function cambiaTestata(pos, numerosms, idinvio) {

//Recupero la colonna interessata
var oTable = document.getElementById(‘tabella’);
var oRow = oTable.rows[pos - 1];
var col = oRow.getElementsByTagName(‘TD’)[0];
//Sostituisco l’icona utilizzando una diversa classe css
col.className=”testosms_meno”;
//Sostituisco la funzione onClick esistente:
col.onclick = function () { rimuovi(idinvio, numerosms); };

}

La funzione rimuovi invece, fa tornare la tabella allo stato originario:

function rimuovi(id, numrighe) {

//Recupero la colonna interessata
var oRow = document.getElementById(‘tr_’ + idinvio);
var col = oRow.getElementsByTagName(‘TD’)[0];
col.className = “testosms_piu”;

//Elimino tutte le righe inserite precedentemente
var oTable = document.getElementById(‘tabella’);
var i;
var posizione = oRow.rowIndex + 1;
for (i=0; i oTable.deleteRow(posizione);

//Aggiorno l’evento on Click della colonna
col.onclick = function () { inserisciRiga(id); };

}

Direi che è tutto.