从阵列填充Bootstrap 4表吗？

时间：2018-07-19 11:26:30

标签： javascript html html-table responsive-design bootstrap-4

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

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

以下本质上是我想要实现的布局类型，但这是静态的，我很想拥有一种可以根据从数组中检索到的数据量来获取这些变化的行的东西。

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="breadcrumb">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted'}"><a href="#pendingApproval" data-toggle="tab">Pending Approval</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending'}"><a href="#workInProgress" data-toggle="tab">Work In Progress</a></li>
      <li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending' || dataStatus=='inprogress'}"><a href="#complete" data-toggle="tab">Complete</a></li>
    </ul>
  </div>

  <div class="tab-content" style="margin:5%;">
    <div class="tab-pane active" id="submitted" ng-class="{'active':dataStatus=='submitted'}">
      Submitted data will be displayed here....
    </div>
    <div class="tab-pane" id="pendingApproval" ng-class="{'active':dataStatus=='pending'}">
      Pending Approvals will be displayed here....
    </div>
    <div class="tab-pane" id="workInProgress" ng-class="{'active':dataStatus=='inprogress'}">
      In Progress data will be displayed here....
    </div>
    <div class="tab-pane" id="complete" ng-class="{'active':dataStatus=='completed'}">
      Completed data will be displayed here....
    </div>
  </div>
</div>

当仅尝试使用这些表中的一个来尝试使一般概念正常工作时，我只是转了一圈，似乎无法弄清楚表元素的层次结构以及如何关联javascript为引导程序类创建了行以进行设计。

以下是我的尝试，但它似乎并没有改变基本的bootstrap html或进行任何更改（众多尝试之一）（向Ovidiu致谢以纠正错误）：

    <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>

编辑：为澄清起见，我的问题与重复的问题有所不同，因为我仍想保留引导程序格式。只需创建一个动态表即可删除所有引导类和格式化，以使表保持响应状态。

编辑2：感谢Ovidiu的工作fiddle！这更清楚地说明了我的观点：一旦动态填充了表，就不再应用Bootstrap格式！

1 个答案:

答案 0 :(得分：2)

要使用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 （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>
相关问题
最新问题