Ajouter des éléments de tableau à partir d'un tableau d'objets en utilisant jQuery

Question

Je sais que si je dispose de suffisamment de temps, je vais comprendre, mais ce serait bien si une âme aimable peut me diriger dans la bonne direction. Je suis relativement inexpérimenté avec jQuery, mais j'ai un peu de connaissance javascript intermédiaire.

Étant donné un tableau d'objets sous la forme:

[ 
    {"value1":"10/14/2010", "value2":"1", "value3":"1178.94"}, 
    {"value1":"10/12/2010", "value2":"1", "value3":"1341.49"} 
] 

Comment puis-je ajouter un tr pour chaque élément de tableau, avec valeur1, valeur2 et valeur3 que le contenu de chaque enfant élément td?

Ce qui a été me arrêter est la suivante:

var b = $('#table tbody'); 
tr = b.append($("<tr></tr>")); 
tr.append($("<td>blah</td><td>blah</td><td>blah</td>")); 

Il ajoute l'élément tr, que je l'ai prouvé par des méthodes DOM régulières. Mais il ne va pas ajouter les éléments td. Il agit comme le résultat de b.append() n'est pas l'élément tr ajouté? Je suppose que peut-être raison et je dois faire:

tr = $("<tr></tr>"); 
b.append(tr); 
tr.append(...); 

Quoi qu'il en soit, votre aide me faire sur la bonne voie serait très appréciée.

---

Ne vous occupez pas de la question bonus, mais ici, il est à titre de référence depuis que je l'ai posté initialement.

Les deux premières valeurs sont en réalité les coordonnées x et y de la troisième valeur. Donc la colonne la plus à gauche montre la date, la ligne du haut montre le nombre 1 ou 2, et la valeur décimale devrait aller dans la cellule correspondante. Toute réflexion sur la meilleure façon de le faire serait également appréciée. Mais cette question était surtout sur la raison pour laquelle mes trucs jQuery ne fonctionnent pas.

C'est, la table doit ressembler à ceci:

   1  2 
10/17/2010 2345.6 1543.2 
10/16/2010   1234.5 
10/15/2010 2222.2 

Mais je tentais de voir si tout mon voyage aller-retour ajax/JSON travaillait d'abord et ne pouvait même pas obtenir que !! Je ferai une sorte de "fusion de fusion" en parcourant la liste des dates/colonnes et en remplissant les valeurs présentes, et en faisant quelque chose d'autre pour les valeurs manquantes.

Answer 1

Quand vous faites:

b.append($("<tr></tr>")); 

il revient b, donc la variable tr est referenceing en fait le tbody.

Essayez ceci:

var b = $('#table tbody'); 
tr = $("<tr></tr>").appendTo(b); 
tr.append("<td>blah</td><td>blah</td><td>blah</td>"); 

Il utilise jQuery's .appendTo() method à la place afin d'inverser la position afin que le nouveau <tr> est retourné.

Ou vous pouvez éviter les variables tout à fait comme ceci:

$("<tr></tr>").appendTo('#table tbody') 
       .append("<td>blah</td><td>blah</td><td>blah</td>"); 

ou

$("<tr></tr>").append("<td>blah</td><td>blah</td><td>blah</td>") 
       .appendTo('#table tbody'); 

Answer 2

essayez ceci:

//change arrayList to your array variable 
var t = ""; 
$.each(arrayList, function(i, v) { 
    t += '<tr><td>'+v.value1+'</td><td>'+v.value2+'</td><td>'+v.value3+'</td></tr>'; 
}); 
$('#table tbody').append(t); 

Cela devrait le faire!