从数组填充 Bootstrap 4 表？
Posted
技术标签:
【中文标题】从数组填充 Bootstrap 4 表？【英文标题】：Populate Bootstrap 4 Table From Array? 【发布时间】：2018-12-27 12:31:45 【问题描述】：我目前正在尝试从数组中动态填充 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！这更清楚地说明了我的观点，即一旦动态填充表格，就不再应用引导格式！
【问题讨论】：
Generate HTML table from 2D JavaScript array的可能重复 可能与this重复 我相信我的问题更侧重于如何动态创建表格但保留引导格式和类！ 你的小提琴有错误 - 你不能直接附加文本作为元素jsfiddle.net/8s5rgwp4（工作版本） 【参考方案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 >
<col >
<col >
</colgroup>
<tbody id="table2">
<tr>
<td>Content 4</td>
<td>Content 4</td>
<td>Content 4</td>
</tr>
<!-- etc. --->
</tbody>
</table>
【讨论】：
您好 Jaboja，感谢您的回复！我采纳了您的建议，但不幸的是，我仍然无法通过使用 JavaScript 动态生成内容来保留任何引导格式。最初的表格小提琴jsfiddle.net/8s5rgwp4/26 仍然存在保持响应性甚至仅保留 table-striped 属性的问题。但我也尝试按照您在jsfiddle.net/aq9Laaew/110319 的建议使用 创建一个示例，但这会导致更奇怪的结果！ 您的代码存在一些问题。请参阅我对答案的编辑。 太棒了！像魅力一样工作！非常感谢！以上是关于从数组填充 Bootstrap 4 表？的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap-vue 表没有填充我的数据库数据[重复]