IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[Article] Créer une table HTML éditable en JavaScript v2.0


Sujet :

JavaScript

Vue hybride

bigboomshakala [Article] Créer une table... 05/01/2010, 00h06
Bovino Encore un excellent article... 05/01/2010, 12h37
Arnaud F. Petite proposition... 05/01/2010, 13h07
SpaceFrog Il est ou le mode d'emploi... 05/01/2010, 13h24
bigboomshakala Pour l'instant l'édition... 05/01/2010, 14h12
bigboomshakala ça doit pouvoir se faire. je... 05/01/2010, 14h05
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut [Article] Créer une table HTML éditable en JavaScript v2.0
    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

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Encore un excellent article

    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Rédacteur
    Avatar de Arnaud F.
    Homme Profil pro
    Développeur COBOL
    Inscrit en
    Août 2005
    Messages
    5 183
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Développeur COBOL
    Secteur : Finance

    Informations forums :
    Inscription : Août 2005
    Messages : 5 183
    Par défaut
    Petite proposition d'amélioration : SHIFT + TAB recule dans le tableau, c'est possible?

    Sinon, super article
    C'est par l'adresse que vaut le bûcheron, bien plus que par la force. Homère

    Installation de Code::Blocks sous Debian à partir de Nightly Builds

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    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 ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    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

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    j'ai double clique un peu partout sous ffx sans pouvoir modifier quoi que ce soit ...
    un twilight zone ??
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    Citation Envoyé par bigboomshakala Voir le message
    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).
    Bon en fait, avec ce que j'ai déjà, ces modifs sont ultra simples
    J'ai intégré le Shift+TAB, l'édition sur la touche Entrée et la sélection de tout le texte de la cellule lors de l'édition dans la v2.0. Je verrais d'ici ce weekend pour mettre à jour l'article



    en dehors de ça c'est ma tournée pour les 1000 visites de mes pages d'aujourd'hui!

  8. #8
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    Citation Envoyé par Arnaud F. Voir le message
    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!

Discussions similaires

  1. [Article] Créer une table HTML éditable en JavaScript v1.0
    Par bigboomshakala dans le forum Général JavaScript
    Réponses: 29
    Dernier message: 16/04/2012, 16h26
  2. Réponses: 13
    Dernier message: 30/06/2011, 17h33
  3. Réponses: 4
    Dernier message: 22/01/2010, 10h24
  4. Comment créer une Table dans 1 Bdd ACCESS avec Builder??
    Par makandja dans le forum C++Builder
    Réponses: 6
    Dernier message: 17/03/2004, 20h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo