torna alle lezioni

Modificare un TD al click

importanza: 5

Rendete le celle della tabella modificabili al click.

  • Al click – la cella dovrebbe diventare “modificabile” (compare una textarea al suo interno), e possiamo modificarne l’HTML. Non dovrebbe essere possibile il ridimensionamento, tutte le geometrie dovrebbero rimanere intatte.
  • I pulsanti OK e CANCEL devono apparire sotto la cella per completare/cancel la modifica.
  • Si può modificare solamente una cella per volta. Mentre un <td> è in modalità “edit mode”, i click nelle altre celle vengono ignorati.
  • La tabella può avere tante celle. Usare la event delegation.

La demo:

Apri una sandbox per l'esercizio.

  1. Al click – sostituire l’innerHTML della cella con un <textarea> della stessa dimensione e senza bordi. Si può usare JavaScript o i CSS per impostare le dimensioni corrette.
  2. Impostare textarea.value con td.innerHTML.
  3. Porre il focus nella textarea.
  4. Mostrare i pulsanti OK/CANCEL sotto la cella, e gestire i click su di essi.

Apri la soluzione in una sandbox.