Firefox n'affiche pas la première ligne dans une table JSON générée dynamiquement

Question

En utilisant le code jQuery ci-dessous, j'essaye de prendre un objet JSON pour créer une nouvelle table remplie avec toutes les données JSON. Le code ci-dessous fonctionne parfaitement dans tous les navigateurs sauf pour Firefox. Dans Firefox, le code crée la table, mais il saute systématiquement sur la première ligne. (Toutes les lignes restantes s'affichent parfaitement dans FF.) Plus précisément, lors de la première itération de la méthode «each», le code crée les balises de la première ligne avec un attribut id pour cette balise. Cependant, aucun code HTML interne (les éléments et le texte) n'est ajouté à l'élément. Je ne comprends pas pourquoi le code fonctionne dans tous les navigateurs (y compris IE8) mais pas FF. Quelqu'un peut-il offrir des suggestions?

$('#mydiv').append('<table><thead><th>Activity</th><th>Category</th><th>Deadline</th><th>Status</th></thead><tbody>') 

$(json).each(function(i) { 
    $('#mydiv tbody') 
     .append("<tr id='" + json[i].id + "'></tr>") 
     .children("'#" + json[i].id + "'") 
      .append("<td class='activity'>" + json[i].activity + "</td>") 
      .append("<td class='category'>" + json[i].category + "</td>") 
      .append("<td class='deadline'>" + json[i].deadline + "</td>") 
      .append("<td class='status'>" + json[i].status + "</td>") 
}) 
$('#mydiv').append('</tbody></table>') 

Answer 1

Essayez ce (pas sûr que ça va marcher ..)

$('#mydiv').append('<table><thead><th>Activity</th><th>Category</th><th>Deadline</th><th>Status</th></thead><tbody></tbody></table>') 

$(json).each(function(i) { 
    $('#mydiv tbody') 
     .append(
      $("<tr />").attr("id", json[i].id) 
      .append("<td class='activity'>" + json[i].activity + "</td>") 
      .append("<td class='category'>" + json[i].category + "</td>") 
      .append("<td class='deadline'>" + json[i].deadline + "</td>") 
      .append("<td class='status'>" + json[i].status + "</td>") 
     ) 
});