如何在javascript中创建表

我有这段代码，可以使数据以表格格式显示，但表头和行显示为两个不同的主体，我如何处理它

  $("#container").html("<table> <th>Name</th> <th>Address</th> <th>Sex</th> <th>Email</th>")
        for (var i = 0; i < data.length; i++) {
            $("#container").append("<tr><td>" +
            data[i].name + "</td><td>" +
            data[i].address + "</td><td>" +
            data[i].sex + "</td><td>" +
            data[i].email + "</td><tr>"
          );
        }
        $("container").append("</table>") 

$（“#容器”）.html（“姓名地址性别电子邮件”）
对于（变量i=0；i

这就是我得到的

我想要整个表，而不是两个单独的伙伴。

您不能单独附加

和

，附加DOM元素（通过在场景后面设置

innerHTML

）与字符串串联不同。浏览器检测到无效的标记，并通过添加表中缺少的部分来相应地修复它。因此，在第一次追加之后，您将得到一个表，在循环中，您将行追加到

#container

，而不是错误呈现的表中

要修复此问题，请尝试以下操作：

var $table = $("#container").html("<table><tr><th>Name</th><th>Address</th><th>Sex</th><th>Email</th></tr></table>");
for (var i = 0; i < data.length; i++) {
    $table.append("<tr><td>" + data[i].name + "</td><td>" + data[i].address + "</td><td>" + data[i].sex + "</td><td>" + data[i].email + "</td></tr>");
}

var$table=$（“#container”）.html（“NameAddressSexEmail”）；
对于（变量i=0；i

注意，我还缓存了

$table

变量，这样您就不会在每次迭代中查询DOM

还要注意结束标记，在代码中有两个问题，例如

应该在哪里

您也需要为

添加

：

$（“#容器”）.html（“姓名地址性别电子邮件”）

var htmlTable='namedAddressSex Email'；
对于（变量i=0；i

---

立即将该表添加到DOM中，否则浏览器将无法呈现该表。

您可以添加一个处理该问题的工具吗？那你期望什么呢？我不知道如何将asp.net项目添加到fiddle中。也许，在这里关闭

tr

标记->

data[I]。email+“”

试试这个fiddle，你可以用你的值替换“Jack”。好的捕获-缺少

tr

，这也是另一个问题。你还有一个未关闭的

。最终结果将完全相同……并且在这里关闭表不会有任何帮助，因为后面添加的行将不在其中。jQuery已经在那里隐式地添加了end标记。最终结果仍然完全相同。这很好，但不要忘记

var

（

i=0

将变为全局）。啊，是的，我总是忘记那个。谢谢

$("#container").html("<table> <tr><th>Name</th> <th>Address</th> <th>Sex</th> <th>Email</th></tr></table>")

var htmlTable = '<table><tr><th>Name</th><th>Adress</th><th>Sex</th>   <th>Email</th></tr>'; 
for(var i = 0; i < data.length; i++) {
    htmlTable += '<tr><td>' + data[i].name + '</td><td>' + data[i].adress + '</td><td>' + data[i].sex + '</td><td>' + data[i].email + '</td></tr>';
}
htmlTable += '</table>';

$('#container').html(htmlTable);