使用 javascript 附加到引导表答案

【问题标题】：Append to bootstrap table using javascript使用 javascript 附加到引导表
【发布时间】：2019-07-10 14:03:15
【问题描述】：

我发现了一些其他似乎使用 jquery 解决此问题的帖子，但我只想使用 javascript。我想使用引导程序创建一个表，但似乎无法弄清楚如何将新数据附加到表中。它正在创建表头，然后只是将我想要的项目作为表头下方的行转储。

html

<div id = specificFailureCountTable-js></div>

let filterText = 'machines';
let tableData = document.getElementById("specificFailureCountTable-js"); 
let data = [["machineA",15],["machineB",54],["machineC",26]];

//set header of table
tableData.innerHTML = `
<table class="table table-striped" id = "myTable">
  <thead>
    <tr>
      <th scope="col">${filterText}</th>
      <th scope="col">Count</th>
    </tr>
  </thead>
  <tbody>
  `;
  //create//append rows
for(i = 0; i < data.length; i++){
    tableData.innerHTML = tableData.innerHTML +
    `<tr>
      <th scope="row">${i}</th>
      <td>${data[i][0]}</td>
      <td>${data[i][1]}</td>
    </tr>`
}
//close off table
tableData.innerHTML = tableData.innerHTML +
  `</tbody>
  </table>`
  ;

【问题讨论】：

您需要创建单个字符串并在循环之后分配给 innerHTML 否则您将破坏 DOM 结构。如果您使用开发工具检查 DOM（在 Chrome 中右键单击 -> 上下文菜单 -> 检查元素或 F12），则可以检查作为 DOM 输出的内容。
如果我在for 循环中创建单个字符串，它希望创建与data.[i] 对象一样多的表。这就是为什么我认为我必须将它分成多个字符串。

标签： javascript html-table bootstrap-4

【解决方案1】：

只需使用将定义您的表的变量附加到该变量，并在它准备好时分配给tableData.innerHTML，否则您将破坏 DOM（不确定输出会是什么，但可能会有所不同，具体取决于在浏览器上）：

let filterText = 'machines';
let tableData = document.getElementById("specificFailureCountTable-js"); 
let data = [["machineA",15],["machineB",54],["machineC",26]];

//set header of table
let table = `
<table class="table table-striped" id = "myTable">
  <thead>
    <tr>
      <th scope="col">${filterText}</th>
      <th scope="col">Count</th>
    </tr>
  </thead>
  <tbody>
  `;
  //create//append rows
for(i = 0; i < data.length; i++){
    table = table +
    `<tr>
      <th scope="row">${i}</th>
      <td>${data[i][0]}</td>
      <td>${data[i][1]}</td>
    </tr>`
}
//close off table
table = table +
  `</tbody>
  </table>`
  ;

tableData.innerHTML = table;

还有一个注意事项：您可以使用table += 'xxx' 作为table = table + 'xxx' 的快捷方式

【讨论】：