Question

这应该很简单：我有以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        var table = document.createElement("table");
        table.setAttribute("id","table");
        var headRow = document.createElement("tr");
        var dataRow = document.createElement("tr");
        var head = document.createElement("th");
        var data = document.createElement("td");
        head.innerHTML="head";
        data.innerHTML="data";
        headRow.appendChild(head);
        dataRow.appendChild(data);
        table.appendChild(headRow);
        table.appendChild(dataRow);
        console.log(document.styleSheets);
        table.className = "table";
        document.getElementById("test").appendChild(table);
    });
  </script>
</head>
<body>
<div id="test"></div>
</body>
</html>

问题是：bootstrap.min中为类＆＃34;表＆＃34;指定的样式。在装载侧面时从不应用。我还需要做些什么吗？我在最新版本的Safari中测试它。

任何帮助？

Cheers Twerp

Answer 1

这不是动态创建的问题。这是因为您没有将类设置为table。正如Bootstrap Docs所说：

您必须使用<thead>和<tbody>才能使班级发挥作用。

添加你的答案：

var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);

添加此内容以进行快速修复：

$("tr:first-child").wrap("<thead/>");

您的最终代码应如下所示：

    var table = document.createElement("table");
    table.setAttribute("id","table");
    var headRow = document.createElement("tr");
    var dataRow = document.createElement("tr");
    var head = document.createElement("th");
    var data = document.createElement("td");
    var thead = document.createElement("thead");
    thead.appendChild(headRow);
    var tbody = document.createElement("tbody");
    tbody.appendChild(dataRow);
    head.innerHTML="head";
    data.innerHTML="data";
    headRow.appendChild(head);
    dataRow.appendChild(data);
    table.appendChild(thead);
    table.appendChild(tbody);
    console.log(document.styleSheets);
    table.className = "table";
    document.getElementById("test").appendChild(table);

Answer 2

样式的细微差别是因为Bootstrap依赖于<tbody>和<thead>元素来应用样式。如果您要动态创建元素，则还需要创建元素：

var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);

然后，不要直接添加headRow和dataRow，而是添加新创建的元素：

table.appendChild(thead);
table.appendChild(tbody);

Example Fiddle

Answer 3

    $(function () {
        var table = $('<table></table>').attr('id', 'table').addClass('table')
        var head = $('<th></th>').html('head')
        var data = $('<th></th>').html('data')
        var headRow = $('<tr></tr>').append(head)
        var dataRow = $('<tr></tr>').append(data)
        table.append(headRow)
        table.append(dataRow)
        console.log(document.styleSheets);
        $('#test').append(table);
    })

Answer 4

将样式表添加到动态添加内容的最佳方法是使用 classList

请参考以下链接： https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

或

您可以使用 element.style.cssProperty

如何将样式表应用于动态创建的元素？

4 个答案: