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

jQuery Discussion :

Jquery - Modifier un tableau


Sujet :

jQuery

  1. #1
    Membre actif

    Homme Profil pro
    Site Reliability Engineer
    Inscrit en
    Janvier 2013
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Site Reliability Engineer
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Janvier 2013
    Messages : 57
    Billets dans le blog
    3
    Par défaut Jquery - Modifier un tableau
    Bonjour, j'ai une toute petite question: j'essai (après avoir récupéré des données de planning (3 colonnes et 3 attributs) au format json (exemple ci-joint) de modifier le tableau bootstrap avec ces données. Or, j'ai essayé quelques les méthodes html/js et jquery (enfin je crois) les plus courantes à savoir: append, innerHTML et appendTO ...
    J'ai utilisé une boucle afin de créer les 3 lignes et un console.info pour me dire que la fonction est bien exécutée mais rien n'y fait

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    {"status": "success","result": {"0": ["Juillet/Aout","..."
    ],"1": ["Aout/Septembre","..."
    ],"2": ["Septembre/Octobre","À venir"]},"publish_date": "2019-06-03T10:01:05.484Z"}
    ma fonction JS:
    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
    22
    23
    24
    $(document).ready(function() {
       let pubDate = $("#publish_date");
     
    $.get('une url ...', function(d) {
          let p = new Date(d.publish_date);
     
          let dMY = p.getDate() + "/" + (p.getMonth() + 1) + "/" + p.getFullYear();
     
    pubDate.html(dMY); //marche bien
     
          let t = $("#tbl");
    for (i = 0; i < d.length; i++) {
          //Lignes ici
    t.appendTo("<tr><th scope='row'>"+d[i][0]+"</th><td><ul>");
          for(j = 1; j < d[i].length; j++) {
             //colonnes ici
    t.appendTo("<li>"+d[i][j]+"</li>");
    }
          t.innerHTML += "</ul></td></tr>"
    }
     
       console.info('Mise à jour du planning !')
       console.log(t)   })
    });
    il n'y a que la date de dernière mise à jour qui fonctionne bien pubdate.html( ... )

    Merci énormément de vos réponses

    PS: voici le tableau en question
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <table class="table table-bordered">
       <thead>
          <tr>
             <th scope="col">Période</th>
             <th scope="col">Jeux/Activité</th>
          </tr>
       </thead>
       <tbody id="tbl">
       </tbody>
    </table>
    N'hésitez pas à consulter le site http://cppreference.com/ ou encore la faq c++ ici

  2. #2
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    tu ne confondrais pas AppendTo http://api.jquery.com/appendTo/
    et Append http://api.jquery.com/append/ ?
    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 !

  3. #3
    Membre actif

    Homme Profil pro
    Site Reliability Engineer
    Inscrit en
    Janvier 2013
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Site Reliability Engineer
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Janvier 2013
    Messages : 57
    Billets dans le blog
    3
    Par défaut
    Bonjour, oui effectivement, mais append ne marche pas non plus;
    Pensez-vous que cela serait la cause que le tableau ne ai besoin d'un premier tr pour pouvoir être modifié par la suite ? Merci
    N'hésitez pas à consulter le site http://cppreference.com/ ou encore la faq c++ ici

  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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    TOn souci vient de ta boucle sur le json ..;
    un json n'a pas de length ...

    Il faut faire un for each ...

    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
    d={"status": "success","result": {"0": ["Juillet/Aout","..."
    ],"1": ["Aout/Septembre","..."
    ],"2": ["Septembre/Octobre","À venir"]},"publish_date": "2019-06-03T10:01:05.484Z"}
     
    $tbl=$('#tbl');
     
    $.each( d.result, function(key, val){
     
    $l =$('<tr/>'); // création de la ligne 
    $c1= $('<td/>').html(val[0]); // création de la cellule 1
    $c2= $('<td/>').html(val[1]); // création de la cellule 2
    $l.append($c1,$c2); // on appende les deux cellules dans la ligne
     
    $tbl.append($l); // on appende la ligne dans le tbody
     
    });
    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
    Membre actif

    Homme Profil pro
    Site Reliability Engineer
    Inscrit en
    Janvier 2013
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Site Reliability Engineer
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Janvier 2013
    Messages : 57
    Billets dans le blog
    3
    Par défaut
    Ah c'était donc ça... Merci beaucoup, je teste cet aprem et je met en résolu.
    N'hésitez pas à consulter le site http://cppreference.com/ ou encore la faq c++ ici

  6. #6
    Membre actif

    Homme Profil pro
    Site Reliability Engineer
    Inscrit en
    Janvier 2013
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Site Reliability Engineer
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Janvier 2013
    Messages : 57
    Billets dans le blog
    3
    Par défaut
    Re-bonjour, pour faire avec x éléments dans dans chaques cellules, il faut aussi utiliser for each ? car je compte mettre un ul puis un li dans chaque cellule. Je teste et j'envoi un bout de code
    Cordialement,
    N'hésitez pas à consulter le site http://cppreference.com/ ou encore la faq c++ ici

  7. #7
    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 659
    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 659
    Billets dans le blog
    1
    Par défaut
    tu peux mettre ce que tu vaux dans le html ...
    du code html ou alors tu peux aussi créer les éléments DOM avec JQUERY et faire des append de li dans un ul ...
    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 !

  8. #8
    Membre actif

    Homme Profil pro
    Site Reliability Engineer
    Inscrit en
    Janvier 2013
    Messages
    57
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Site Reliability Engineer
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Janvier 2013
    Messages : 57
    Billets dans le blog
    3
    Par défaut
    Bon, après plusieurs essais je suis arrivé à un fonctionnement qui reste seulement à peaufiner.
    Code final:
    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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    $(document).ready(function() {
       let pubDate = $("#publish_date");
     
    $.get('url de l\'api', function(d) {
          let p = new Date(d.publish_date);
     
          let dMY = p.getDate() + "/" + (p.getMonth() + 1) + "/" + p.getFullYear();
     
    pubDate.html(dMY);
     
    $tbl = $("#tbl");
     
    $.each(d.result, (key, val) => {
             let l = "<tr>";
     
    l += "<td>"+val[0]+"</td>";
     
             let ul = "<td><ul>";
     
             for (i = 1; i < val.length; i++) {
                ul += "<li>"+val[i]+"</li>";
    }
     
             ul += "</ul></td>";
     
    l += ul;
    l += "</tr>";
    $tbl.append(l);
    })
       })
    });
    PS: Cela marche, merci de votre aide
    N'hésitez pas à consulter le site http://cppreference.com/ ou encore la faq c++ ici

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

Discussions similaires

  1. [Tableaux] Modifier un tableau sur une page en PHP
    Par leclone dans le forum Langage
    Réponses: 12
    Dernier message: 02/01/2007, 14h06
  2. Modifier un tableau avec innerHTML sous IE
    Par Gédéon dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 06/12/2006, 12h32
  3. Réponses: 11
    Dernier message: 14/10/2006, 21h26
  4. [Debutant] Besoin d'aide pour modifier un tableau...
    Par CyberTwister dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 08/03/2006, 14h14
  5. modifier un tableau avec javascript
    Par lemmings dans le forum Général JavaScript
    Réponses: 27
    Dernier message: 15/11/2005, 10h10

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