jQuery动态表创建表结构不正确

Question

我正在使用jQuery创建动态表，如下所示。

$('#dynamictable').append('<table>');
var table = $('#dynamictable').children();
for (var i = 0; i < 13; i++) {
    table.append("<tr>");
    for (var j = 0; j < 7; j++) {
        table.append("<td style='background:#ccc;'>cell</td>");
    }
    table.append("</tr>");
}
$('#dynamictable').append('</table>');

表似乎没问题。但是当我检查表结构不正确时。

如下所示：

哪个不对。 查看我的小提琴，了解详细信息：FIDDLE

Answer 1

当您追加<tr>时，它会将</tr>添加到代码中。同样适用于</tr>。

你应该这样做 -

for (var i = 0; i < 13; i++) {
    var str = "<tr>";
    for (var j = 0; j < 7; j++) {
        str += "<td style='background:#ccc;'>cell</td>";
    }
    str += "</tr>";
    table.append(str);
}

Fiddle

Answer 2

您将td直接附加到table，而不是添加到tr，然后将tr添加到table。这就是你将hd作为表的直接子项的原因。创建一个tr对象添加 tds ，然后将此tr添加到表中将使正确的html

Live Demo

$('#dynamictable').append('<table>');
var table = $('#dynamictable').children();
for (var i = 0; i < 13; i++) {
    tr = $("<tr />");
    for (var j = 0; j < 7; j++) 
        tr.append("<td style='background:#ccc;'>cell</td>");  
    table.append(tr);
}
$('#dynamictable').append('</table>');