Tutoriel JavaScript : Créer une table HTML éditable

Par Nourdine Falola

Le 2010-01-05 00:06:25, par bigboomshakala, Rédacteur

Voici la v2.0 de la HtmlEditTable.

Nouveautés :
- création d'un HtmlEditTable à partir d'un tableau HTML existant (<TABLE>
- édition avec la touche ENTREE
- annulation avec la touche ECHAP
- navigation avec les flèches
- navigation avec la touche TAB et la combinaison de touches SHIFT+TAB

Testez les démos au fil de l'article sur différents navigateurs
Téléchargez les sources pour les étudier
Bien que le développement ait été rigoureux, il peut y avoir de petites erreurs : rapportez-les ici
Cet article est la suite directe et référence l'article de la v1.0, jetez-y un oeil
La discussion relative à la v1.0 est close mais parcourez-la, il y a des échanges intéressants.

l'article : Créer une table HTML éditable v2.0
l'article : Créer une table HTML éditable v1.0
Discussion de la v1.0

tout commentaire constructif est le bienvenu

Discussion forum

27 commentaires

Bovino
Rédacteur

Encore un excellent article

le 05/01/2010 à 12:37
Arnaud F.
Rédacteur

Petite proposition d'amélioration : SHIFT + TAB recule dans le tableau, c'est possible?

Sinon, super article

le 05/01/2010 à 13:07
SpaceFrog
Rédacteur/Modérateur

Il est ou le mode d'emploi pour editer la table ?
ou alors j'ai pas compris le sens du mot editable ???
on peut pas editer les cellules en live ?

le 05/01/2010 à 13:24
bigboomshakala
Rédacteur

Envoyé par Arnaud F.

Petite proposition d'amélioration : SHIFT + TAB recule dans le tableau, c'est possible?

Sinon, super article

ça doit pouvoir se faire. je vais voir si je peux l'inclure dans cette version!

le 05/01/2010 à 14:05
bigboomshakala
Rédacteur

Envoyé par SpaceFrog

Il est ou le mode d'emploi pour editer la table ?
ou alors j'ai pas compris le sens du mot editable ???
on peut pas editer les cellules en live ?

Pour l'instant l'édition n'est initiée qu'en double-cliquant sur une cellule. Une fois en édition, on peut passer d'une cellule à l'autre avec TAB tout en restant en édition.

Dans un futur proche (dépendant de mon emploi du temps) ce sera mieux. L'édition d'une cellule pourra être initiée en cliquant sur Entrée (édition + sélection du contenu de la zone de texte) ou directement sur une touche alphanum (en remplaçant directement le contenu de la zone de texte).

Vu le temps limité dont je disposais pour faire le code et l'article (et surtout pour s'y remettre après 6 mois) j'ai préféré restreindre les ajouts. Ceci dit, maintenant que je suis parti je vais peut-être pouvoir être plus régulier.

Côté mode d'emploi pour l'instant y'en a pas ^^ (si on omet les 2 tuto) Pourquoi pas dans l'avenir, mais pour l'instant les fonctionnalités dont restreintes. J'y pense dans mes TODO

le 05/01/2010 à 14:12
SpaceFrog
Rédacteur/Modérateur

j'ai double clique un peu partout sous ffx sans pouvoir modifier quoi que ce soit ...
un twilight zone ??

le 05/01/2010 à 20:19
Bovino
Rédacteur

Tu es sûr que tu es sur la bonne page de démo : http://falola.developpez.com/tutorie...sources/step7/ ?

le 05/01/2010 à 20:41
bigboomshakala
Rédacteur

l'édition est opérationnelle depuis la v1.0
c'est ok sur les 7 démos (FF3.5.6, Chrome3.0, IE6)

le 05/01/2010 à 21:22
Bovino
Rédacteur

Envoyé par bigboomshakala

c'est ok sur les 7 démos (FF3.5.6, Chrome3.0, IE6)

http://falola.developpez.com/tutorie...sources/step1/

le 05/01/2010 à 21:35
bigboomshakala
Rédacteur

Envoyé par Bovino

http://falola.developpez.com/tutorie...sources/step1/

owned by la Moûûh-mie... j'avais chargé les sources dans le répertoire supérieur par erreur...

le 05/01/2010 à 22:13

Poster une réponse