Aggiungi/Rimuovi/Sposta una riga della tabella con jQuery

Postato da admin 29 agosto 2009 @ 9:21 am
Informatica | JavaScript & AJAX

Dopo aver capito come gestire dinamicamente la struttura di una tabella utilizzando il “div” ho voluto un pò complicare il tutto aggiungendo la possibilità di effettuare il drag and drop di una riga.

Il risultato è questo: demo

Nel pacchetto

jQuery gestione tabella.zip (40,7 KiB, 249 hits)

oltre allo script jQuery, troverete anche i file:

index.htm
scripts.js
jquery.tablednd_0_5.js … approfondimento

Passo 1 – file HTML

Riga di codice importantissima da non modificare:

<table id="campi"></table>

infatti è all’interno di questo “table” che verranno creati i vari campi di input, contenuti nelle righe create dinamicamente. Come potete notare non uso più il “div” (vedi articolo precedente).

Passo 2 – file JS

Vi sono quattro funzioni:

La funzione addFormField() inserice una riga nella tabella contenente il campo di input.
La funzione removeFormField() rimuove la riga selezionata dalla tabella e richiamando la funzione aggiorna(), riodina le etichette dei campi in ordine numerico crescente.
La funzione inizializza_tabella() usa la libreria “jquery.tablednd_0_5.js” e rinizializza la tabella per il drag & drop delle righe. Usa volta effettuato lo spostamento della riga, le etichette dei campi verranno riaggiornate.

Di seguito il codice:

function inizializza_tabella() {
   $('#campi').tableDnD({
        onDrop: function(table, row) {
            aggiorna();
        }
    });
}
 
function addFormField() {
	var id = $('#campi tr[id^="row"]').length + 1;
	$("#campi").append('
 
Campo '+id+'
<input id="txt'+id+'" name="txt[]" size="25" type="text" />
<a onclick="removeFormField($(this).parent());return false;" href="#"><img src="img/edit_remove.png" border="0" alt="" /></a>
 
');
	document.getElementById("valore_c").innerHTML = "Campi inseriti: &lt; "+id+" &gt;";
	inizializza_tabella();
}
 
function aggiorna() {
var index = 0 ;
   $("#campi tr").each(function(i){
          i++; index=i;
	      $(this).attr('id','row'+i);
		  var currentVal = $(this).find('input').val();
		  $(this).html('
Campo '+i+'
<input id="txt'+i+'" name="txt[]" size="25" type="text" value="'+currentVal+'" />
<a onclick="removeFormField($(this).parent());return false;" href="#"><img src="img/edit_remove.png" border="0" alt="" /></a>
 
')
	});
	document.getElementById("valore_c").innerHTML = "Campi inseriti: &lt; "+index+" &gt;";
}; 
 
function removeFormField(el) {
    $(el.parent()).remove();
    aggiorna();
   	inizializza_tabella();
};