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 :

Créer dynamiquement le contenu d'une table HTML


Sujet :

JavaScript

  1. #1
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut Créer dynamiquement le contenu d'une table HTML
    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></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.

  2. #2
    Membre émérite
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 036
    Points : 2 615
    Points
    2 615
    Par défaut
    Salut,

    Citation Envoyé par L'AMI Yves Voir le message
    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...


    Citation Envoyé par L'AMI Yves Voir le message
    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...

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 237
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 237
    Points : 22 498
    Points
    22 498
    Billets dans le blog
    74
    Par défaut


    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
    });

    Blog



    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Membre émérite
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 036
    Points : 2 615
    Points
    2 615
    Par défaut
    Citation Envoyé par danielhagnoul Voir le message

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

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 237
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 237
    Points : 22 498
    Points
    22 498
    Billets dans le blog
    74
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    [...] 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.

    Blog



    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  6. #6
    Membre émérite
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 036
    Points : 2 615
    Points
    2 615
    Par défaut
    Oui c'est vrai lol...

  7. #7
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    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.

  8. #8
    Membre habitué

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 205
    Points : 145
    Points
    145
    Par défaut
    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.

  9. #9
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    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.

    Citation Envoyé par Beginner. Voir le message
    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.

  10. #10
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 014
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 014
    Points : 32 805
    Points
    32 805
    Par défaut
    Bonjour,

    Citation Envoyé par L'AMI Yves Voir le message
    ...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)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  11. #11
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    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.

  12. #12
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 014
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 014
    Points : 32 805
    Points
    32 805
    Par défaut
    Bonjour,

    oui, c'est clair.

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


    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...).
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  13. #13
    Membre émérite
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 036
    Points : 2 615
    Points
    2 615
    Par défaut
    Salut,
    Citation Envoyé par L'AMI Yves Voir le message
    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...

    Citation Envoyé par L'AMI Yves Voir le message
    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...

    Citation Envoyé par L'AMI Yves Voir le message
    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...

    Citation Envoyé par L'AMI Yves Voir le message
    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...


    Citation Envoyé par L'AMI Yves Voir le message
    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 :

    Citation Envoyé par L'AMI Yves Voir le message
    ...
    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...

  14. #14
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    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.

  15. #15
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    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

  16. #16
    Membre émérite
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 036
    Points : 2 615
    Points
    2 615
    Par défaut
    Citation Envoyé par L'AMI Yves Voir le message
    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é...

  17. #17
    Membre émérite
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 036
    Points : 2 615
    Points
    2 615
    Par défaut
    Citation Envoyé par L'AMI Yves Voir le message
    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...

  18. #18
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    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.

  19. #19
    Membre émérite
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    2 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 2 036
    Points : 2 615
    Points
    2 615
    Par défaut
    Citation Envoyé par L'AMI Yves Voir le message
    ...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...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 01/05/2017, 16h49
  2. [Toutes versions] Copier le contenu d'une table HTML dans une feuille Excel
    Par jeanmidudu dans le forum Macros et VBA Excel
    Réponses: 58
    Dernier message: 04/12/2015, 16h44
  3. Réponses: 4
    Dernier message: 05/08/2008, 16h22
  4. [C#] Comment remplir dynamiquement une table HTML ?
    Par tiboleo dans le forum ASP.NET
    Réponses: 3
    Dernier message: 31/05/2006, 10h51
  5. [MySQL] Lister le contenu d'une table dans un tableau HTML
    Par carmen256 dans le forum PHP & Base de données
    Réponses: 10
    Dernier message: 03/04/2006, 20h40

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