insertion <img> dans <td>

Version imprimable

Bonjour ,
voici une partie de mon

Code:

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:

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 ?!

31/01/2018, 16h07
Beginner.

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 ?
31/01/2018, 16h25
Beginner.

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...

Salut !
j'ai changé tout le code pour profiter de la fonction "insertAdjacentHTML()" ; ça donne :
Code:

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()"

31/01/2018, 18h31
Beginner.

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...
31/01/2018, 18h39
exe2bin

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 ....
31/01/2018, 18h57
Beginner.

Citation:

Envoyé par exe2bin

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

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...
01/02/2018, 09h23
exe2bin

Citation:

Envoyé par Beginner.

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 !