从数组填充 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为设计的引导类创建了行。

以下是我的尝试，但它似乎并没有改变基本引导 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 的工作 fiddle！这更清楚地说明了我的观点，即一旦动态​​填充表格，就不再应用引导格式！

Answer 1

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

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

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

---

回复评论： 如果您要使用table-stripped，那么显然您需要使用<table> 而不是<div>。但是，您不得将 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>