Firefox won't display first row in a dynamically generated JSON table

Using the jQuery code below, I'm trying to take a JSON object to create a new table populated with all the JSON data. The code below works perfectly in every browser except for Firefox. In Firefox, the code does create the table, but it consistently skips over the first row. (All the remaining rows display perfectly in FF.) More precisely, during the first iteration of the "each" method, the code does create the tags for the first row along with an id attribute for that tag. However, none of the inner HTML (the elements and text) is appended to the element. I can't understand why the code works in every browser (including IE8) but not FF. Can anyone offer some 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>')

---

Try this (not sure it'll work..)

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