[AJAX] Editing in place (Form multipli)

[leonapster]

Ho un elenco di dati (record mysql) e voglio dare la possibilità di modificarli direttamente.
Ho cercato in giro dei plugin per jquery ma tutti permettono di modificare solamente i singoli dati.
esempio

DATO 1 - DATO 2 - DATO 3 - DATO 4
DATO 1 - DATO 2 - DATO 3 - DATO 4
DATO 1 - DATO 2 - DATO 3 - DATO 4
DATO 1 - DATO 2 - DATO 3 - DATO 4

I plugin che ho trovato mi permettono di modificare i singoli dati, aggiungendo un incona (modifica) al singolo


DATO 1 () - DATO 2 () - DATO 3 () - DATO 4 ()
DATO 1 () - DATO 2 () - DATO 3 () - DATO 4 ()
DATO 1 () - DATO 2 () - DATO 3 () - DATO 4 ()
DATO 1 () - DATO 2 () - DATO 3 () - DATO 4 ()

Quello che invece voglio fare io è
DATO 1 - DATO 2 - DATO 3 - DATO 4 ()
DATO 1 - DATO 2 - DATO 3 - DATO 4 ()
DATO 1 - DATO 2 - DATO 3 - DATO 4 ()
DATO 1 - DATO 2 - DATO 3 - DATO 4 ()

In poche parole con un click solo rendere editable tutta la riga e modificare i dati direttamente nel database mysql


Con queli plugin posso farlo? Ce ne sono alcuni per jquery?
Accetto anche altri framework js

[artorius]

Puoi fare una cosa così:

crei un CSS di questo tipo:

input[readonly="readonly"]{
   border: 0px none transparent;
   padding: 0;
   background-color: transparent;
}

in questo modo, un input in readonly è del tutto identico a del testo normale. Poi inserisci direttamente gli input type="text" nella tabella con readonly attivo.

<table>
   <tr>
      <td><input type="text" readonly="readonly" value="DATO1" /></td>
      <td><input type="text" readonly="readonly" value="DATO2" /></td>
      <td><input type="text" readonly="readonly" value="DATO3" /></td>
      <td><input type="text" readonly="readonly" value="DATO4" /></td>
      <td><a href = "#" class = "Toogler">[Edit]</a><td>
   </tr>
   <tr>
      <td><input type="text" readonly="readonly" value="DATO1" /></td>
      <td><input type="text" readonly="readonly" value="DATO2" /></td>
      <td><input type="text" readonly="readonly" value="DATO3" /></td>
      <td><input type="text" readonly="readonly" value="DATO4" /></td>
      <td><a href = "#" class = "Toogler">[Edit]</a><td>
   </tr>
   <tr>
      <td><input type="text" readonly="readonly" value="DATO1" /></td>
      <td><input type="text" readonly="readonly" value="DATO2" /></td>
      <td><input type="text" readonly="readonly" value="DATO3" /></td>
      <td><input type="text" readonly="readonly" value="DATO4" /></td>
      <td><a href = "#" class = "Toogler">[Edit]</a><td>
   </tr>
   <tr>
      <td><input type="text" readonly="readonly" value="DATO1" /></td>
      <td><input type="text" readonly="readonly" value="DATO2" /></td>
      <td><input type="text" readonly="readonly" value="DATO3" /></td>
      <td><input type="text" readonly="readonly" value="DATO4" /></td>
      <td><a href = "#" class = "Toogler">[Edit]</a><td>
   </tr>
</table>

poi crei una funzione, da associare all'evento onclick dei link con class = "Toogler" che, prenda tutti gli input della stessa riga della tabella e rimuova il readonly.

Poi fai il submit della form con AJAX e rimetti il readonly a tutti gli input.