tableEdit un plugin per jQuery

La nuova versione del noto Framework javascript [1] (la 1.3) ha introdotto l'interessantissimo metodo "live()" per gestire gli eventi su gli elementi presenti e generati del DOM. Ho testato questo metodo per un mini-applicativo che dovevo realizzare; quello che mi serviva era una tabella nella quale doveva essere possibile editare al volo alcuni dei suoi valori senza ricaricare la pagina. In particolare al clic di uno di questi elementi dovevano essere generati due classici bottoni per il salva e l'annulla, in modo da salvare tutti i valori editati in un unico clic. Per utilizzare il plugin basta includere l'ultima release di jQuery e richiamare lo script in questo modo

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/tableEdit.js"></script>
 
<script type="text/javascript">
 
<!--//--><![CDATA[//><!--
 
$(document).ready(function (){
 
	$.tableEdit({
 
		 tabella: "daeditare", // id della tabella sulla quale applicare il plugin
		 indirizzo: "http://www.signalkuppe.com/tutorial/editing/test.php", // url dello script lato server
		 classe: "sopra", // classe per gestire gli hover sugli .edit
		 form: "modifica", // id della form creata dinamicamente
		 invio: "inviadati", // id del bottone di invio
		 resetta: "azzera" // id del bottone per il reset
 
		});
 
});
 
//--><!]]>
 
</script>

In pratica basta richiamare il file js che contiene il plugin e inizializzarlo settando alcuni parametri tra cui l'url dello script lato server tramite il quale vengono salvati i dati.

Principio di funzionamento

prima di tutto qui c'è una piccola demo [2]

Lo script cerca all'interno della vostra tabella tutti gli elementi con classe edit e al clic li sostituisce con un tag input che permette di editare il loro valore. Per referenziare in modo univoco il valore, lo script utilizza l'attributo id dello span stesso. Di conseguenza basta applicare questa struttura a tutti gli elementi che vogliamo rendere editabili

<span class="edit" id="campo_indirizzo">Via Garibaldi 23</span>

Sicuramente esisteranno altre soluzioni, magari anche più efficienti, ma per essere un primo tentativo sono soddisfatto.
Ad esempio sarebbe bello introdurre anche la validazione lato client dei dati.

Scarica il plugin [3]