Discussion :

[L'AMI Yves]

Bonsoir à tous.

Oui, j'ai cherché ici et ailleurs. Et j'ai trouvé plein de réponses (en général à peu près les mêmes, d'ailleurs), mais je n'y arrive toujours pas, et je ne comprends pas pourquoi.

Voici le bout du code HTML de la page concerné par le problème :

Code HTML :

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
    <div class="grand-container-d gros z1" id="lecompte">
      <div class="en-tete"> </div>
      <div class="interieur">
       <table class="journal">
        <thead>
         <tr>
            <th class='col3'><div>Compte</div></th>
            <th class='col4'><div>N°</div></th>
            <th class='col5'><div>Sous-compte</div></th>
          </tr>
      </thead>
      <tbody id="Sous_Comptes">
      </tbody>
    </table>
  </div> <!-- class 'interieur'          -->
  </div> <!-- class 'grand_conteneur'    -->

Et voici le code javascript qui devrait remplir le "tbody" :

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
 
  function SelC(Id,col)
  { 
    var i,j,table,lien,cible,ventile,nc,nsc,l,v0,tsc;
  		tsc=document.getElementById("Sous_Comptes");
  		tsc.innerHTML="";
  		nsc=SComptes[v0];
  		for(i=0;i<nsc.length;i++)
  		{  // ajouter les appels de la fonction SelSC
  			l=tsc.insertRow(-1);
        l.outerHTML="<tr id='L" + i + "' onClick='SelSC(" + i +",0)'></tr>";
  			nc=l.insertCell(0);
  			nc.innerHTML+=Comptes[v0]['Compte'];
  			nc=l.insertCell(1);
  			nc.innerHTML+= i;
  			nc=l.insertCell(2);
  			nc.innerHTML+=SComptes[v0][i];
        alert(l.outerHTML);
  		}
    }

Bon, vous pouvez voir que ce qui n'est pas tout à fait classique, c'est que je veux ajouter des id= et onclick= dans mes <tr>.
Mon dernier "alert" me montre mes lignes avec les <td> tels que je les désire, mais les <tr> sont vides.
Quant au "Examiner l'élément" de Firefox, il ne me montre que les <tr>, avec leurs id et onclick, mais sans aucun <td>.
Et Firefox me montre un tbody vide !

Je fais certainement une grosse bourde quelque part, mais j'y ai passé l'après-midi sans rien comprendre.

Alors... à vot' bon cœur, m'sieurs-dames.

AMIcalement.

[Beginner.]

Salut,

Bon, vous pouvez voir que ce qui n'est pas tout à fait classique, c'est que je veux ajouter des id= et onclick= dans mes <tr>.

Je ne crois pas que ce soit une bonne idée... Déjà faire cela à la main dans le HTML n'est pas pas considéré par certains comme ce qu'il y a de mieux alors le faire dynamiquement avec innerHTML/outerHTML...

Pour ajouter dynamiquement des gestionnaires d’événement il y a la méthode addEventListener...

Et il y a la délégation qui pourrait être une bonne idée, cela dépend de ce que tu veux faire...

Et Firefox me montre un tbody vide !

Ben en l'état le code fourni ne fait rien, la fonction SelC (SelC(Id, col)) n'est jamais exécutée... Et les paramètres Id et col ainsi que les variables j, table, lien, cible et ventile ne sont pas utilisées...

[danielhagnoul]

id='L" + i Attention un ID doit être unique dans la page web !

Exemple :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
th {
  border: 1pt solid grey;
}

Code HTML :

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
<table>
    <thead>
        <tr>
            <th>
                Nom
            </th>
            <th>
                N° Client
            </th>
            <th>
                N° Compte
            </th>
        </tr>
    </thead>
    <tbody id="comptes">
    </tbody>
</table>

Code JavaScript :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const elem_tbody = document.querySelector('#comptes');
    const SComptes = [ [ 'Dupond', 1, 100 ], [ 'Durand', 2, 101 ]];
 
    function ajoute_comptes(comptes) {
        for (const item of comptes) {
            let nom = item[0];
            let num_client = item[1];
            let num_compte = item[2];
 
            let tr = document.createElement('tr');
            let td_nom = document.createElement('td');
            let td_num_client = document.createElement('td');
            let td_num_compte = document.createElement('td');
 
            td_nom.textContent = nom;
            td_num_client.textContent = num_client;
            td_num_compte.textContent = num_compte;
 
            tr.appendChild(td_nom);
            tr.appendChild(td_num_client)
            tr.appendChild(td_num_compte)
 
            tr.setAttribute('id', 'id' + String(num_compte)) // normalement un N° de compte est unique !
 
            elem_tbody.appendChild(tr)
        }
    }
 
    ajoute_comptes(SComptes)
 
    /*
    <tbody id="comptes">
        <tr id="id100">
            <td>Dupond</td>
            <td>1</td>
            <td>100</td>
        </tr>
        <tr id="id101">
            <td>Durand</td>
            <td>2</td>
            <td>101</td>
        </tr>
    </tbody>
    */
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

[Beginner.]

id='L" + i Attention un ID doit être unique dans la page web !

Effectivement mais à priori ici les id ne sont pas identiques puisque la variable i change à chaque tour de la boucle... Mais c'est vrai qu'il faut faire attention car si on lance plusieurs fois la même fonction...


En tous cas on peut partir du code de Daniel (qui est meilleur) et ajouter des gestionnaires d’événement avec la méthode addEventListener... Ou bien on utilise la délégation (une seul gestionnaire pour toute la table par exemple).

[danielhagnoul]

[...] Mais c'est vrai qu'il faut faire attention car si on lance plusieurs fois la même fonction... [...]

C'est la raison pour laquelle on crée une fonction, pouvoir exécuter le code plusieurs fois.

[Beginner.]

Oui c'est vrai lol...

[L'AMI Yves]

Salut,
Ben en l'état le code fourni ne fait rien, la fonction SelC (SelC(Id, col)) n'est jamais exécutée... Et les paramètres Id et col ainsi que les variables j, table, lien, cible et ventile ne sont pas utilisées...

Je n'ai pas montré tout le code. La fonction SelC est exécutée par un "onClick" dans une autre table...

Ce qui est intéressant dans la programmation, c'est de s'aventurer dans des territoires inconnus : je n'ai jamais utilisé l'EventListener, mais cette remarque me surprend : si j'écris dans le code HTML "<tr onClick='toto'>", ou bien si je parviens à le faire écrire par javascript, dans le innrHTML d'un <tr>, ça ne fait pas la même chose ?

Merci à tous de vos réponses : j'approfondis tout ça demain. Bonne nuit.

AMIcalement.

[amateurprg]

Salut, peut-être que le TR c'est juste un indicateur de ligne comme il le fait et non un véritable contenant comme l'est le TD (qui est une case donc du tableau comme tu sais), et donc je me dis que le innerHTML doit marcher qu'avec les contenants (contener en anglais si tu préfères).
Peut-être que c'est ça ?

Et aussi si tu sais à l'avance combien y aura de TR tu peux tout écrire et ajouter dedans après avec js, le id et le onclick que tu veux, sinon si tu connais pas le nombre de TR, la meilleure solution c'est sûr que c'est la création d'un élément du dom.

[L'AMI Yves]

Je ne crois pas que ce soit une bonne idée... Déjà faire cela à la main dans le HTML n'est pas pas considéré par certains comme ce qu'il y a de mieux alors le faire dynamiquement avec innerHTML/outerHTML...

Voila une remarque qui m'étonne. Qui sont ces "certains" et que donnent-ils comme argument ? Si c'est que parfois javascriot est désactivé, c'est bon, passons. Sinon, un programme qui marche, marche, je ne vois pas où est le problème.

Pour ajouter dynamiquement des gestionnaires d’événement il y a la méthode addEventListener...

Est-ce que ça veut dire qu'il ne suffit pas que la chaîne "onClick='...'" soit présente dans le <tr> pour que ça fasse le job ? Ca voudrait donc dire qu'à la réception du flux HTML, le navigateur détecte cette chaîne et fait sa cuisine, ce qui ne se passe pas elle est ajoutée dynamiquement au contenu de la balise ?

Le contenu de ton lien m'a paru particulièrement abscons à la première lecture. Peux-tu me donner un exemple de ce que tu ferais dans mon cas STP ?

Il y a encore du pain sur la planche... A+

AMIcalement.

[Invité]

Bonjour,

...Peux-tu me donner un exemple de ce que tu ferais dans mon cas STP ?...

Déjà, explique CLAIREMENT :

• la fonction SelC(Id, col) : comment/où est-elle appelée ? à quoi correspondent les 2 paramètres ? -> montre un extrait du code HTML généré ("Ctrl"+"U")
• que sont SComptes[[...] et Comptes[...] ?
• quel résultat tu veux obtenir au final (quel est le code HTML qui doit être créé ?)

Et si tu as déjà cherché et trouvé des liens sur le sujet, donne-les aussi.

Tu as raison d'utiliser .insertRow() et .insertCell() puisqu'on traite bien une <table> *.
Par contre, je ne vois pas ce que viennent faire dans ton code les .outerHTML / .innerHTML ?

* danielhagnoul donne une autre méthode, plus générale, utilisant .createElement() et .appendChild().

CONSEIL : mets des noms de variables plus lisibles et compréhensibles ! (comme le fait danielhagnoul)

[L'AMI Yves]

Cette application est destinée à faire l'interface avec une base de données MySQL dans laquelle il y a (entre autres) deux tables, l"une appelée "Comptes" et l'autre "Sous_Comptes" : à chaque item de la table "Comptes" peuvent être associés (ou non...) plusieurs "Sous-Comptes" (est-ce assez clair ?).

Le problème que je traite en ce moment consiste à gérer ces deux tables MySQL : une première table HTML liste le contenu de la table MYSQL "Comptes". Je veux que, quand l'utilisateur sélectionne un Compte (en cliquant dans une ligne de la table HTML), une seconde table HTML s'affiche, listant les Sous-Comptes associés.

A ce moment, s'il clique de nouveau dans la même ligne, un formulaire HTML apparait, lui permettant de modifier l'enregistrement de la table MySQL "Comptes". Par contre, s'il clique dans une ligne de la table HTML "Sous-Comptes", un autre formulaire s'affiche, lui permettant de modifier cet enregistrement de la table MySQL "Sous_Comptes".

Mettre ça en mots donne quelque chose de plutôt confus, mais ça me paraît très clair. Et c'est pourquoi j'ai besoin de remplir dynamiquement la table HTML "Sous_Comptes", en metant un "id" et un "onclick" sur chaque <tr> de cette table HTML, comme il y en a sur chaque <tr> de celle des "Comptes", ce qui me permet de gérer les formulaires correspondants.

Voici le dernier article que j'ai consulté, il devrait me permettre d'avancer : je reviendrai en reparler quand j'aurai fait mes essais : https://stackoverflow.com/questions/...ogrammatically


A+

AMIcalement.

[Invité]

Bonjour,

oui, c'est clair.

Et c'est justement une des raisons pour lesquels on utilise Ajax.

• Web 2.0, allez plus loin avec AJAX et XMLHttpRequest - IV-A. Listes liées

Dans l'exemple fourni, remplace :

• table SQL "auteur" par table SQL "Comptes"
• table SQL "livre" par table SQL "Sous-Comptes"
• le 1er <select> par ta <table> HTML de "Comptes"
• le 2ème <select> par la <table> HTML "Sous-Comptes" à générer via le fichier PHP externe (appelé via Ajax)

... et tu as ta solution (à quelques "adaptations" près...).

[Beginner.]

Salut,

Le contenu de ton lien m'a paru particulièrement abscons à la première lecture. Peux-tu me donner un exemple de ce que tu ferais dans mon cas STP ?

Ben en général j'aide quand je le peux, je poste même des codes entiers s'il le faut... Mais peux-tu comprendre que lorsque l'on n'a pas toutes les infos nous permettant de faire des tests pour reproduire le problème rencontré eh bien c'est difficile de trouver une solution ou de poster un nouveau code fonctionnel ?

Du coup on doit imaginer, essayer de deviner à quoi correspondent les parties manquantes pour pouvoir faire des testes...

Ce n'est pas toujours évident et dans tous les cas cela prend plus de temps et demande plus d'effort...

Et tout ça un dimanche en plus comme le dit parfois jreaux62 lol...

Ce qui est intéressant dans la programmation, c'est de s'aventurer dans des territoires inconnus : je n'ai jamais utilisé l'EventListener, mais cette remarque me surprend : si j'écris dans le code HTML "<tr onClick='toto'>", ou bien si je parviens à le faire écrire par javascript, dans le innrHTML d'un <tr>, ça ne fait pas la même chose ?

Ben si tu peux faire cela même si c'est moins avantageux cela peut fonctionner si tu fais attention à certains points (cf. ci-dessous), tu es libre, la méthode addEventListener c'était un conseil qui a des avantages mais c'est une autre histoire...

Voila une remarque qui m'étonne. Qui sont ces "certains" et que donnent-ils comme argument ? Si c'est que parfois javascriot est désactivé, c'est bon, passons.

Je te donnerai quelques liens plus tard... Mais je vais t'expliquer ci-dessous un des problèmes en utilisant comme exemple ton propre code...

Sinon, un programme qui marche, marche, je ne vois pas où est le problème.

Ben justement le problème c'est que ton code ne fonctionne pas lol...

Bon, vous pouvez voir que ce qui n'est pas tout à fait classique, c'est que je veux ajouter des id= et onclick= dans mes <tr>.
Mon dernier "alert" me montre mes lignes avec les <td> tels que je les désire, mais les <tr> sont vides.
Quant au "Examiner l'élément" de Firefox, il ne me montre que les <tr>, avec leurs id et onclick, mais sans aucun <td>.
Et Firefox me montre un tbody vide !

Bon ok on va voir pourquoi cela fait cela et justement aborder un des problèmes qui peut survenir quand on mélange les méthodes du DOM avec outerHTML/innerHTML... Bien sûr on peut l'éviter si on fait attention mais ce n'est pas toujours évident de le repérer :

Prenons ta boucle for, le premier tour de la boucle où i vaut 0 et analysons les instructions :

1- l = tsc.insertRow(-1);...

tsc est une référence à la table "Sous_Comptes", ok...
Tu ajoutes à cette table une ligne et tu en conserves une référence dans l, ok...
Cette nouvelle ligne est insérée dans le DOM, ok...


2- l.outerHTML = "<tr id='L" + i + "' onClick='SelSC(" + i + ",0)'></tr>";...

Là justement le problème (corruption du DOM) : tu viens d’écrabouiller la ligne que tu avais insérée dans le DOM à l'étape 1 !

Oui tu l'écrabouilles lol et tu mets à la place une nouvelle ligne, celle qui correspond à la chaine de caractères, c'est-à-dire celle-ci : <tr id="L0" onclick="SelSC(0,0)"></tr>...

Tu as toujours en mémoire une référence à la ligne l mais elle n'est plus dans le DOM...

Tu peux vérifier que tu as bien deux lignes différentes (une dans le DOM et l'autre juste en mémoire) :

1. Tu peux récupérer une référence à la ligne qui est dans le DOM comme ceci : var rowInDOM = document.getElementById("L0");
2. Tu as toujours une référence à la ligne qui n'est plus dans le DOM c'est l
   
3. Fais la comparaison en exécutant ceci : console.log(rowInDOM == l); et cela devrait afficher false...

2- nc = l.insertCell(0);...

Là tu insères une cellule dans la ligne l, la ligne qui en mémoire, pas celle qui est dans le DOM !

Et la suite c'est pareil, tout ce que tu fais concerne seulement la ligne l...


2- alert(l.outerHTML);...

Là tu affiches la ligne l et tu obtiens une ligne avec 3 cellules :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
 
</tr>

Comme on peut le voir il n'y a pas le gestionnaire onclick, ce dernier est associé à la ligne qui est dans le DOM à savoir : <tr id="L0" onclick="SelSC(0,0)"></tr>...

Tout ça, c'est pour le premier tour de boucle et c'est pareil pour les autres tours du coup à la fin cela répond à ta question, c'est-à-dire cela explique ce que tu as constaté à savoir :

...
Mon dernier "alert" me montre mes lignes avec les <td> tels que je les désire, mais les <tr> sont vides.
Quant au "Examiner l'élément" de Firefox, il ne me montre que les <tr>, avec leurs id et onclick, mais sans aucun <td>.

----------------

Tu peux modifier le code pour que cela fonctionne comme tu veux mais à partir du moment où tu utilises insertRow et insertCell c'est dommage d'utiliser ensuite outerHTML/innerHTML...

A toi de voir...

[L'AMI Yves]

2- l.outerHTML = "<tr id='L" + i + "' onClick='SelSC(" + i + ",0)'></tr>";...

Là justement le problème (corruption du DOM) : tu viens d’écrabouiller la ligne que tu avais insérée dans le DOM à l'étape 1 !

Oui tu l'écrabouilles lol et tu mets à la place une nouvelle ligne, celle qui correspond à la chaine de caractères, c'est-à-dire celle-ci : <tr id="L0" onclick="SelSC(0,0)"></tr>...

J'avais vérifié (avec un "alert") que le "outerHTML" de ma ligne nouvellement créée était bien "<tr></tr>". Ma naïveté était de ne pas connaître l'existence du DOM en tant qu'élément du programme, je ne le considérais que comme une structure de données, voire de la documentation. Expliqué comme ça le non fonctionnement de mon essai est très clair.

Mais j'avais changé ma façon de faire, en espérant être plus "conforme" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 	l=tsc.insertRow(-1);
        li="LSC" + i;
        l.id=li;
        f="function(){SelSC(" + li +")}";
        l.onclick=eval(f);
  	nc=l.insertCell(0);
  	nc.innerHTML+=Comptes[v0]['Compte'];

Ceci est la dernière mouture, qui ne fonctionne toujours pas : je désespère d'arriver à mettre un paramètre dans la définition du "onclick". Avec ce code, j'obtiens le message

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

SyntaxError: function statement requires a name

sur le "eval".
Il n'y aurait donc pas de solution en javascript. Je suis très réticent à passer à l'Ajax : il y a déjà du MySQL, du PHP, du HTML, du CSS, du javascript... Où cela s'arrêtera-t-il ?

Merci de tes efforts.

AMIcalement.

[L'AMI Yves]

Ah ! J'ai trouvé ! Et, comme toujours, c'était beaucoup plus simple que tout ce que j'ai cherché :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
  	l=tsc.insertRow(-1);
        li="LSC" + i;
        l.id=li;
        l.onclick=function(){SelSC(this.id)};

Pas besoin d'Ajax...

Merci à tous.

AMIcalement

[Beginner.]

Ceci est la dernière mouture, qui ne fonctionne toujours pas : je désespère d'arriver à mettre un paramètre dans la définition du "onclick".

Si tu tiens à faire comme ça, avec le onclick, tu peux essayer ça : l.setAttribute("onclick","SelSC("+i+",0);");...

eval c'est déconseillé...

[Beginner.]

Ah ! J'ai trouvé ! Et, comme toujours, c'était beaucoup plus simple que tout ce que j'ai cherché :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
      l=tsc.insertRow(-1);
        li="LSC" + i;
        l.id=li;
        l.onclick=function(){SelSC(this.id)};

Pas besoin d'Ajax...

Merci à tous.

AMIcalement

Ah ben là autant utiliser la méthode addEventListener...

Sinon dans le code initial il y avait deux paramètres, maintenant il n'y en a qu'un et c'est le id...

[L'AMI Yves]

Sinon dans le code initial il y avait deux paramètres, maintenant il n'y en a qu'un et c'est le id...

Oui, au départ, j'avais prévu de mettre l'identifiant de ligne et le numéro de cellule, mais je me suis aperçu que ça ne servait à rien. Et comme en plus, avec l'id, je sais faire, pourquoi compliquer ? (J'ai pas réussi le concours de Polytechnique - en fait, je ne l'ai même pas présenté...).

AMIcalement.

[Beginner.]

...J'ai pas réussi le concours de Polytechnique - en fait, je ne l'ai même pas présenté...

Ben moi non plus lol...