javascript - 如何使用 jquery 动态构建复杂的 HTML

Question

我正在尝试动态构建一些 HTML。HTML 作为一个 div，其中有一个表格，在表格的一列中，还有另一个表格。

目前，我正在使用 jquery 的 .append 方法，但似乎不起作用。我得到“无法获得未定义的子节点的属性”。该应用程序仅使用 IE。我能指出正确的方向吗？我在这里做错了什么？

 $("<div style='background-color: #757575 border: 1px solid gray; ").append("MainDiv");
$("<table style='width: 100%; height: 100%'>").append("MainDiv");
    $("<tr>" + "<td>" +
    "<table style='width: 100%; background-color: #757575; color: white" +
    ";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
    "<tr>" +
    "<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
    "<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
    "<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
    "</tr>" +
    "</table></td></tr></table></div>").append("MainDiv");

Answer 1

你可以像这样使用append():

var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});

var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
    ";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
    "<tr>" +
    "<td nowrap style='width: 70px; background-color: #999999; font-weight: bold; color: black'>ID</td>" +
    "<td style='width:100px;background-color: #999999; font-weight: bold; color: black'>Name</td>" +
    "<td style='text-align:left;width: 90px; background-color: #999999; font-weight: bold; color: black'>Status</td>" +
    "</tr>" +
    "</table></td></tr>");

container_div.append(table);
$("#MainDiv").append(container_div);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>

希望这对您有所帮助。

注意:我建议为所有 td 之间的共享样式创建一个类，这样代码将更具可读性:

var container_div = $("<div>", {"style" : "background-color: #757575;border: 1px solid gray;"});

var table = $("<table>", {"style" : "width: 100%; height: 100%"}).append("<tr><td><table style='width: 100%; background-color: #757575; color: white" +
    ";border-bottom:1px solid black;height:25px;table-layout:fixed'>" +
    "<tr>" +
    "<td style='width:70px;' class='col' nowrap>ID</td>" +
    "<td style='width:100px' class='col'>Name</td>" +
    "<td style='width: 90px;text-align:left;' class='col'>Status</td>" +
    "</tr>" +
    "</table></td></tr>");

container_div.append(table);
$("#MainDiv").append(container_div);

.col{
  background-color: #999999;
  font-weight: bold;
  color: black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MainDiv"></div>