我目前正在尝试从数组中动态填充 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为引导类创建行以进行设计。
下面是我的尝试，但它似乎并没有改 rebase 本的 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 格式!
最佳答案
要从 JavaScript 添加类，请使用 className属性:
var div = document.createElement('div');
div.className = 'some-class other-class';
您可能还想避免使用像 col-md-3 这样的类与表。 Bootstrap 布局是基于 float 的，而表格在 HTML/CSS 中有自己的显示类型，将它们更改为 float 是行不通的(尤其是您没有在行等上使用 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 是 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>
关于javascript - 从数组填充 Bootstrap 4 表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51421470/