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 :

insertion <img> dans <td>


Sujet :

JavaScript

  1. #1
    Membre averti
    Avatar de exe2bin
    Profil pro
    Passionné de programmation
    Inscrit en
    Mars 2009
    Messages
    537
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Passionné de programmation

    Informations forums :
    Inscription : Mars 2009
    Messages : 537
    Points : 387
    Points
    387
    Billets dans le blog
    3
    Par défaut insertion <img> dans <td>
    Bonjour ,
    voici une partie de mon
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <table id="inventaire">
                <tr>
                    <td id=""></td>
                    <td id=""></td>
                </tr>
            </table>
    je désire insérer des balises <img> et leurs attributs dans les colonnes de <table> ; voici la fonction :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function appendInventory(name)
    {
       var TDElems = document.getElementsByTagName("td");
        for (var i = 0; i < TDElems.length; i++)
        {
            if (TDElems[i].getAttribute("id") == "")
            {
                var td = TDElems[i];
                var imgElement = document.createElement("img");
                imgElement.setAttribute("src",name);
                imgElement.setAttribute("width","34px");
                imgElement.setAttribute("height","25px");
                td.setAttribute("id",name);
                td.appendChild(imgElement);
                imgElement.onclick = inventoryClickEvent;
                imgElement.isActive = false;
                return;
            }
            // next td
        }
    }
    Comme j'appelle 2 fois la fonction avec 2 arguments différents (2 noms de fichier image) ,je devrais voir apparaître les 2 images côte à côte -- une par
    colonne -- au lieu de cela elles se superposent dans la même colonne du tableau ;pourtant le test du début doit servir à les différencier !
    Je ne m'explique pas cela ?!

  2. #2
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 890
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 890
    Points : 3 729
    Points
    3 729
    Par défaut
    Salut,

    Je ne suis pas sûr qu'un id vide soit valable (j'en doute) mais en tous cas il doit être unique.

    PS : Et l'histoire de l'autre fil sur la variable globale c'est bon ou pas ?

  3. #3
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 890
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 890
    Points : 3 729
    Points
    3 729
    Par défaut
    Re-Salut,

    Sinon ta fonction est un peu étrange : tu dis ; "... j'appelle 2 fois la fonction avec 2 arguments différents (2 noms de fichier image)"... Mais pourquoi tu fais une boucle for dans ce cas ? La boucle s’applique à tous les td avec le même name...

    EDIT : Ah non je n'avais pas vu le "return" mais cela avec la boucle je n'en vois pas l’intérêt...

  4. #4
    Membre averti
    Avatar de exe2bin
    Profil pro
    Passionné de programmation
    Inscrit en
    Mars 2009
    Messages
    537
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Passionné de programmation

    Informations forums :
    Inscription : Mars 2009
    Messages : 537
    Points : 387
    Points
    387
    Billets dans le blog
    3
    Par défaut
    Salut !
    j'ai changé tout le code pour profiter de la fonction "insertAdjacentHTML()" ; ça donne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    function appendInventory(name)
    {
       var newTD = "<td><img src=\"" + name + "\" width=\"34px\" height=\"25px\" onclick=\"inventoryClickEvent(this)\"/></td>"
        TRElement.insertAdjacentHTML("beforeend",newTD);
    }
    Mais j'ai le même problème de tableau.
    Aussi un autre problème est venu se greffer car je n'initialise plus la propriété "isActive" de l'image ; du coup je n'arrive pas à
    tester cette valeur correctement dans le gestionnaire "inventoryClick()"

  5. #5
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 890
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 890
    Points : 3 729
    Points
    3 729
    Par défaut
    Bon ben je vois que tu n'as pas répondu à ma question concernant l'autre fil... Difficile de savoir si on avance ou pas avec toi...

    Sinon c'est dommage d'avoir changé complètement de direction, tu pouvais plutôt corriger ton autre code, ce serait mieux...

    Il y a juste besoin de savoir ce que tu veux faire, par exemple d'où viennent les name ? Sont-ils dans un tableau ? Et dans quel ordre tu veux insérer les images dans la table...
    Si par exemple c'est le même ordre que les name dans le tableau c'est simple à faire avec ta boucle for...

  6. #6
    Membre averti
    Avatar de exe2bin
    Profil pro
    Passionné de programmation
    Inscrit en
    Mars 2009
    Messages
    537
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Passionné de programmation

    Informations forums :
    Inscription : Mars 2009
    Messages : 537
    Points : 387
    Points
    387
    Billets dans le blog
    3
    Par défaut
    Les "names" contiennent les valeurs des attributs "src" des balises <img>.
    Ce sont des String codés en dur ,provenant d'une autre fonction.
    L'ordre des images n'a pas d'importance pourvu qu'elles soient dans leurs <td> respectifs.

    PS : Désolé mais tu pourrais préciser la question sur la variable globale ?
    En fait je n'ai plus de problème avec ....

  7. #7
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 890
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 890
    Points : 3 729
    Points
    3 729
    Par défaut
    Citation Envoyé par exe2bin Voir le message
    Les "names" contiennent les valeurs des attributs "src" des balises <img>.
    Ce sont des String codés en dur ,provenant d'une autre fonction.
    L'ordre des images n'a pas d'importance pourvu qu'elles soient dans leurs <td> respectifs.
    Oui mais c'est quoi leur td respectif justement ? Tu as un name qui vient d'une fonction comment tu sais dans quel td l'image correspondante doit aller ?

    La fonction renvoi un seul name à la fois ou bien elle les renvoie tous dans un tableau ou autre ?


    Citation Envoyé par exe2bin Voir le message

    PS : Désolé mais tu pourrais préciser la question sur la variable globale ?
    En fait je n'ai plus de problème avec ....
    Ben dans l'autre fil tu disais : "...mais mon problème est de comprendre pourquoi la variable "marteau" (censément globale ?) n'est pas visible dans
    la fonction "handleClickEvent" ?!..."

    Je t'ai répondu mais tu ne m'as pas dit si ton problème était réglé... Tu le dis juste maintenant...

  8. #8
    Membre averti
    Avatar de exe2bin
    Profil pro
    Passionné de programmation
    Inscrit en
    Mars 2009
    Messages
    537
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Passionné de programmation

    Informations forums :
    Inscription : Mars 2009
    Messages : 537
    Points : 387
    Points
    387
    Billets dans le blog
    3
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    Ben dans l'autre fil tu disais : "...mais mon problème est de comprendre pourquoi la variable "marteau" (censément globale ?) n'est pas visible dans
    la fonction "handleClickEvent" ?!..."

    Je t'ai répondu mais tu ne m'as pas dit si ton problème était réglé... Tu le dis juste maintenant...
    La variable globale est désormais visible ,merci.
    Voici en gros le fonctionnement du programme :
    La page est constituée d'images ,certaines cliquable ,d'autres non ; parmi celles affublées d'un gestionnaire
    onclick ,quelques unes appellent la fonction appendInventory() en lui passant une chaîne de caractère (name)
    correspondant à un nom de fichier .png ,celle ci doit créer de nouveaux nœuds <img> dans le document et les
    rendre cliquable également.
    Jusque là ça doit te paraître assez clair !

Discussions similaires

  1. Insertion d'une icone dans le SystemTray
    Par Vow dans le forum MFC
    Réponses: 23
    Dernier message: 25/01/2008, 14h50
  2. Réponses: 17
    Dernier message: 15/05/2006, 12h28
  3. [C#] Faire un INSERT en même temps dans 2 bases differentes
    Par Pingva dans le forum Accès aux données
    Réponses: 8
    Dernier message: 09/09/2004, 12h07
  4. Réponses: 4
    Dernier message: 13/04/2004, 19h12
  5. Insertion d'un noeud dans une liste chaînée
    Par habib106 dans le forum Assembleur
    Réponses: 8
    Dernier message: 07/04/2004, 22h34

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