从数组填充Bootstrap 4表？

Question

我目前正在尝试从数组中动态填充bootstrap 4表。 我试图填充3个实际并排的表，然后最终将从数组中过滤数据以存储在每个相应的表中。 所以我的目标是3个表，每个表可以填充不同数量的行，数据直接从数组中获取。

但是，每当我尝试通过函数动态填充或创建表时，我要么删除Bootstrap格式，要么最终得到一些非常奇怪的结果！

下面基本上是我想要实现的布局类型，但这是静态的，我很乐意根据从数组中检索多少数据来获取可以获取这些不同行的内容。

    <div class="row">

    <div class="col-md-4">
    <h2 class="sub-header">Test Tab 1</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td class="col-md-1">Content 1</td>
                        <td class="col-md-2">Content 1</td>
                        <td class="col-md-3">Content 1</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 2</td>
                        <td class="col-md-2">Content 2</td>
                        <td class="col-md-3">Content 2</td>
                    </tr>
                     <tr>
                        <td class="col-md-1">Content 3</td>
                        <td class="col-md-2">Content 3</td>
                        <td class="col-md-3">Content 3</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="col-md-4">
    <h2 class="sub-header">Test Tab 2</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td class="col-md-1">Content 4</td>
                        <td class="col-md-2">Content 4</td>
                        <td class="col-md-3">Content 4</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 5</td>
                        <td class="col-md-2">Content 5</td>
                        <td class="col-md-3">Content 5</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 6</td>
                        <td class="col-md-2">Content 6</td>
                        <td class="col-md-3">Content 6</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 7</td>
                        <td class="col-md-2">Content 7</td>
                        <td class="col-md-3">Content 7</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 8</td>
                        <td class="col-md-2">Content 8</td>
                        <td class="col-md-3">Content 8</td>
                    </tr>
                  </tbody>
            </table>
        </div>
    </div>

    <div class="col-md-4">
    <h2 class="sub-header">Test Tab 3</h2>
        <div class="table-responsive">
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td class="col-md-1">Content 9</td>
                        <td class="col-md-2">Content 9</td>
                        <td class="col-md-3">Content 9</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 10</td>
                        <td class="col-md-2">Content 10</td>
                        <td class="col-md-3">Content 10</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 11</td>
                        <td class="col-md-2">Content 11</td>
                        <td class="col-md-3">Content 11</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 12</td>
                        <td class="col-md-2">Content 12</td>
                        <td class="col-md-3">Content 12</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 13</td>
                        <td class="col-md-2">Content 13</td>
                        <td class="col-md-3">Content 13</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 14</td>
                        <td class="col-md-2">Content 14</td>
                        <td class="col-md-3">Content 14</td>
                    </tr>
                    <tr>
                        <td class="col-md-1">Content 15</td>
                        <td class="col-md-2">Content 15</td>
                        <td class="col-md-3">Content 15</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

当试验这些表中的一个表来尝试使一般概念起作用时，我刚刚在圈子里走动，似乎无法弄清楚这个表元素的层次结构以及如何将javascript创建的行关联到设计的bootstrap类。

下面是我的尝试，但它似乎没有改变基本引导程序html或进行任何更改（多次尝试之一）（归功于Ovidiu修复错误）：

var testList = ["TestContent1", "TestContent2", "TestContent3", "TestContent4"];

    function drawTable1() {
        // get the reference for the body
        var table1 = document.getElementById('table1Div');

        // get reference for <table> element
        var tbl = document.getElementById("table1");

        // creating rows
        for (var r = 0; r < testList.length; r++) {
            var row = document.createElement("tr");

         // create cells in row
             for (var c = 0; c < 3; c++) {
                var cell = document.createElement("td");
                var cellText = document.createElement('span');
                cellText.innerText = testList[r];
                cell.appendChild(cellText);
                row.appendChild(cell);
            }           

    tbl.appendChild(row); // add the row to the end of the table body
        }

     table1.appendChild(tbl); // appends <table> into <div>
}

drawTable1();

编辑：为了澄清，我的问题与副本不同，因为我仍然希望保留我的引导程序格式。 简单地创建一个动态表会删除所有引导类和格式，以保持表的响应。

编辑2：谢谢Ovidiu的工作小提琴 ！ 这更清楚地说明了我的观点，即动态填充表后不再应用Bootstrap格式！

Answer 1

要从JavaScript添加类，请使用className属性：

var div = document.createElement('div');
div.className = 'some-class other-class';

您可能还希望避免使用col-md-3与表。 Bootstrap layoud是基于浮动的，而表格在HTML / CSS中有自己的显示类型，并且将它们更改为浮点数将不起作用（特别是您没有row上使用行等）。 移动到纯粹基于<div>的布局或分别使用width=8% ， width=17%和width=25% 。 当然修复宽度的错误总和不到100％（ col-md-1 + col-md-2 + col-md-3 = col-md-6 <col-md-12 （12是100％） Bootstrap中的行宽））。 或者如果你真的想要自由空间，那么要么将它显式添加为空单元格，要么将整个表格width设置为50％。

---

回答评论：如果你要使用table-stripped那么显然需要表是<table>而不是<div> 。 但是，您col-md-#将col-md-#与表格单元格一起使用。 请改用width="33%" （或其他适当的值）属性。 如果动态创建整个表内容，则可以添加<colgroup>部分并与内容分开定义列。 此外，您应该在<tbody>而不是<table>追加您的行。 将它们附加到<table>只能起作用，因为浏览器与HTML 3向后兼容，但Bootstrap不是，它的样式被破坏了。 Bootstrap期望所有单元格都在<thead> ， <tbody>或<tfoot> ，而不是直接在<table> 。 示例代码：

<table class="table table-striped">
    <colgroup>
        <col width="17%">
        <col width="33%">
        <col width="50%">
    </colgroup>
    <tbody id="table2">
    <tr>
        <td>Content 4</td>
        <td>Content 4</td>
        <td>Content 4</td>
    </tr>
    <!-- etc. --->
    </tbody>
</table>