如何使用 JavaScript/jQuery 将单独的 thead 和 tbody 合并到一个表中答案

【问题标题】：How to combine a separate thead and tbody into one table using JavaScript/jQuery如何使用 JavaScript/jQuery 将单独的 thead 和 tbody 合并到一个表中
【发布时间】：2019-09-07 07:47:16
【问题描述】：

我目前正在处理一个需要动态生成表格的项目。每次生成表时都会有所不同，因为我对不同的端点进行了不同的 API 调用。

此表的目的是显示每个特定班级中有哪些学生。到目前为止，我能够获取这些信息，制作一个单独的thead，并将其附加到一个名为“tableContainer”的 div 中。表格的其余部分，即 tbody，分别生成并附加到同一个 div。

这是我目前所拥有的：

let createStudentTable = (data) => {
let tableHeader = ('<table class=\'table\'><thead><tr><th>Name</th><th>Age</th><th>Major</th></tr></thead></table>');

$("#tableContainer").append(tableHeader);

//然后我循环数据并根据班级人数生成tbody

for (var index = 0; index < data.length; index++) {
let tableRow = ('<table class=\'table\'><tbody class=\'tbody\'><tr><td>' + data.name + '</td><td>' + data.age + '</td><td>' + data.major + '</td></tr></tbody></table>');

$("#tableContainer).append(tableRow);

}
}

所以表格会根据班上有多少学生而有所不同。

我的问题——我想使用一个名为 tablesorter 的 jQuery 插件，它按 thead 和 tbody 对行进行排序，但所有内容都必须在同一个表中。但是现在tableHeader和student生成的表都是自己的表。我怎样才能将它们全部“混搭”在一起以创建一张大桌子？

【问题讨论】：

你可能不需要生成thead和table（直接放到html中）只有tbody。尝试生成并将其插入现有表中。

标签： javascript jquery sorting html-table row

【解决方案1】：

好吧，如果我们看一下您的代码，每次您循环遍历数组时，您都会创建一个全新的表，相反，为什么不在您的 html 中初始化该表并附加行？

#tableContainer里面有

<table id="studentTable" class="table">
  <thead>
    <tr>
      <th> Name </th>
      <th> Age </th>
      <th> Major </th>
    </tr>
  </thead>
</table>

然后在你的循环中，而不是做一整行并附加到 div，附加到表本身

let tableRows = '<tbody>';
for (var index = 0; index < data.length; index++) {
    tableRows += ('<tr><td>' + data.name + '</td><td>' + data.age + '</td><td>' + data.major + '</td></tr>');
}
tableRows += '</tbody>';
$("#studentTable").append(tableRows);

如果表需要100%用JS建表，那我们也可以这样做

let tableShell = '<table id=\'studentTable\' class=\'table\'><thead><tr><th>Name</th><th>Age</th><th>Major</th></tr></thead>';

$('#tableContainer').append(tableShell);

let tableRows = '<tbody>';
for (var index = 0; index < data.length; index++) {
    tableRows += ('<tr><td>' + data.name + '</td><td>' + data.age + '</td><td>' + data.major + '</td></tr>');
}
tableRows += '</tbody>';
$("#studentTable").append(tableRows);

【讨论】：