Firefox не отображает первую строку в динамически сгенерированной таблице JSON

Question

Используя код jQuery ниже, я пытаюсь взять объект JSON для создания новой таблицы, заполненной всеми данными JSON. Код ниже отлично работает в каждом браузере, кроме Firefox. В Firefox код создает таблицу, но он последовательно пропускает первую строку. (Все остальные строки отлично отображаются в FF.) Точнее, во время первой итерации «каждого» метода код создает теги для первой строки вместе с атрибутом id для этого тега. Однако ни один внутренний HTML (элементы и текст) не добавляется к элементу. Я не могу понять, почему код работает в каждом браузере (включая IE8), но не в FF. Может ли кто-нибудь предложить какие-то предложения?

$('#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

Попробуйте это (не уверен, что это будет работать ..)

$('#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>") 
     ) 
});