如何使用JavaScript/jQuery将单独的thead和tbody合并到一个表中
如何使用JavaScript/jQuery将单独的thead和tbody合并到一个表中
提问于 2019-04-17 14:26:34
我目前正在做一个项目，在这个项目中我需要动态生成表。每次生成的表都是不同的，因为我对不同的端点进行了不同的API调用。
此表的目的是显示每个特定班级的学生。到目前为止，我能够获得这个信息，创建一个单独的标题，并将其附加到一个名为"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插件，它可以按标题和标题对行进行排序，但所有内容都必须在同一个表中。但是现在，学生生成的tableHeader和表是它们自己的表。我怎么才能把它们“混在一起”来创建一个大的表呢？
回答 1
Stack Overflow用户
发布于 2019-04-17 14:34:10
好的，如果我们看一下你的代码，每次你循环数组，你就创建了一个全新的表，为什么不在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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55721182
复制相关文章
相似问题
腾讯云开发者
