从数组中填充 Bootstrap 4 表格？

Question

从数组中填充 Bootstrap 4 表格？

javascripthtmlhtml-tableresponsive-designbootstrap-4

3

我正在尝试使用一个数组动态填充一个 Bootstrap 4 表格。我要填充三个实际上是并排的表格，最终需要从数组中过滤数据并存储到每个对应的表格中。我的目标是有三个表格，它们可以填充不同数量的行，直接从数组中取数据。

然而，每当我尝试通过函数动态填充或创建表格时，我要么会移除 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设计类相关联。

以下是我的尝试，但它似乎没有改变基本的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();

编辑：为了澄清，与重复的问题不同，我仍然希望保留我的Bootstrap格式。简单地创建一个动态表格会删除所有使表格响应的Bootstrap类和格式。

编辑2：感谢Ovidiu提供工作正常的fiddle！这更清楚地说明了一旦表格被动态填充后，Bootstrap格式将不再适用于它！

- Questionnaire

1

可能是从2D JavaScript数组生成HTML表格的重复问题。 - Mostafa

可能是这个的重复。 - Mostafa

我相信我的问题更多地关注于如何动态创建表格，但保留Bootstrap的格式和类！ - Questionnaire

你的代码有错误 - 你不能直接将文本附加为元素 http://jsfiddle.net/8s5rgwp4/ （可工作版本） - Ovidiu Dolha

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jaboja · Accepted Answer

要从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%。当然，还要修复宽度不相加的bug（col-md-1 + col-md-2 + col-md-3 = col-md-6 < col-md-12（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>