Modifier TD au clique

Nous souhaitons rendre ce projet open source disponible pour les gens du monde entier.

Aidez-nous à traduire le contenu de ce tutoriel dans votre langue!

AcheterEPUB/PDF
Carte du tutoriel
retour au cours

Modifier TD au clique

importance: 5

Rendre des cellules de table éditables au clique.

  • Au clique – la cellule doit devenir “éditable” (une zone de texte apparait à l’intérieur), nous pouvons changer le HTML. Il ne doit pas y avoir de redimensionnement, toute la géométrie doit rester la même.
  • Les boutons OK et CANCEL apparaissent sous la cellule pour terminer/annuler l’édition.
  • Seulement une cellule devrait être éditable à la fois. Pendant qu’un <td> est en “mode d’édition”, les cliques sur les autres cellules sont ignorés.
  • La tableau devrait avoir beaucoup de cellules. Utilisez la délégation d’évènements.

La démo:

Open a sandbox for the task.

  1. Au clique – remplacer innerHTML de la cellule par <textarea> avec les mêmes tailles et aucune bordure. Possibilité d’utiliser JavaScript ou CSS pour mettre les bonnes tailles.
  2. Mettre textarea.value a td.innerHTML.
  3. Mettre le focus sur la zone de texte.
  4. Afficher les boutons OK/CANCEL en dessous de la cellule, gèrent les cliques sur eux-mêmes.

Ouvrez la solution dans une sandbox.