javascript - 动态创建的 Bootstrap 表松散间距调整

Question

我的代码中重复了两次 Bootstrap 表:一个仅使用 HTML 代码创建，另一个使用动态 javascript 创建。

当我使用 HTML 时， Bootstrap 工作正常并且相应地绘制表格。

当我使用 JavaScript 创建它时，列会失去其比例间距。

我期望的结果在两个代码中是相同的。

为什么动态创建的表格不尊重 HTML 创建的表格的原始间距？我需要两个表完全相同...

有谁可以帮我吗？

原始代码:

<p>HTML table</p>


<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed small">

        <thead>
            <tr>
                <th><strong>Item</strong></th>
                <th><strong>Description</strong></th>
                <th><strong>Value</strong></th>
            </tr>
        </thead>
        <tr>
            <td>Item01</td>
            <td>Item02</td>
            <td>Item03</td>
        </tr>
        <tr>
            <td>Item11</td>
            <td>Item12</td>
            <td>Item13</td>
        </tr>
        <tr>
            <td>Item21</td>
            <td>Item22</td>
            <td>Item23</td>
        </tr>
    </table>
</div>

<p>Javascript table</p>

<div id="myMenu">
</div>

<script type="text/javascript">

    $(document).ready(function () {

        /// 
        /// Main table
        ///
        var tableDiv = $("<div class='table-responsive'>");

        $('#myMenu').append(tableDiv);

        var table = $("<div class='table table-striped table-bordered table-hover table-condensed small'>");

        tableDiv.append(table);

        ///
        /// Table head
        ///
        html = "<thead>" +
               "    <tr>" +
               "        <th><strong>Item</strong></th>" +
               "        <th><strong>Description</strong></th>" +
               "        <th><strong>Value</strong></th>" +
               "     </tr>" +
               "</thead>";

        var tableHead = $(html);
        table.append(tableHead);

        ///
        /// Table data
        ///
        var gridRowCount = 5;

        for (var rowCount = 0; rowCount < gridRowCount; rowCount++) {
            html = "<tr>";

            for (var fieldCount = 1; fieldCount < 4; fieldCount++) {
                var str = "Item" + rowCount.toString() + fieldCount.toString();
                html = html + "<td>" + str + "</td>";
            }
            html = html + "</tr>";

            alert(html);

            table.append($(html));
        }
    });

</script>

JsFiddle:

JsFiddle

Answer 1

在代码中进行以下更改

var table = $("<table class='table table-striped table-bordered table-hover table-condensed small'>");

使用table而不是div

有效