Question

我的代码中有一个重复两次的引导表：一个是使用HTML代码创建的，另一个是使用动态javascript创建的。

当我使用HTML时，引导程序正常工作，并相应地绘制表格。

我使用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

它有效

动态创建自举表松散间距调整

1 个答案: