javascript - Firefox 不会显示动态生成的 JSON 表中的第一行

Question

使用下面的 jQuery 代码，我尝试使用 JSON 对象来创建一个填充所有 JSON 数据的新表。下面的代码在除 Firefox 之外的所有浏览器中都能完美运行。在 Firefox 中，代码确实创建了表格，但它始终跳过第一行。 (所有剩余的行在 FF 中完美显示。)更准确地说，在“each”方法的第一次迭代期间，代码确实为第一行创建了标签以及该标签的 id 属性。但是，没有任何内部 HTML(元素和文本) append 到该元素。我不明白为什么代码在每个浏览器(包括 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>")
        )
});