Discussion :

[tutosfaciles48]

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>

[SpaceFrog]

tu ne confondrais pas AppendTo http://api.jquery.com/appendTo/
et Append http://api.jquery.com/append/ ?

[tutosfaciles48]

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

[SpaceFrog]

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

[tutosfaciles48]

Ah c'était donc ça... Merci beaucoup, je teste cet aprem et je met en résolu.

[tutosfaciles48]

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,