Javascript 如何使用JQuery构建动态表？

我想使用JQuery构建动态表，然后将该表附加到DOM中。通常我使用字符串连接方法来构建表。这次我想用JQuery来实现这一点。我很难得到的一件事是在多行上循环时打开/关闭

tr

元素。下面是我的代码的示例：

var数据={
"1": {
“fname”：“Jon”，
“lname”：“Wayne”，
“dob”：“1987年5月14日”，
“状态”：“活动”，
“颜色”：“红色”，
“团队”：“迈阿密”
},
"2": {
“fname”：“Tim”，
“lname”：“Ryan”，
“dob”：“1967年1月23日”，
“状态”：“不活动”，
“颜色”：“蓝色”，
“团队”：“芝加哥”
},
"3": {
“fname”：“Jim”，
“lname”：“Carey”，
“dob”：“1997年2月11日”，
“状态”：“暂停”，
“颜色”：“黄色”，
“团队”：“丹佛”
},
"4": {
“fname”：“Chuck”，
“lname”：“Norris”，
“dob”：“1945年6月9日”，
“状态”：“活动”，
“颜色”：“绿色”，
“团队”：“波士顿”
}
}
$（“#开始”）。在（'单击'，显示记录）；
函数showRecords（）{
显示数据（1，数据）；
}
功能显示数据（fnid，数据）{
var tbl=$（''）.addClass（'display'）.prop（'id'，'data_tbl'），
thead=$（''），
t正文=$（''），
tr=$（''）；
title=[‘名字’、‘姓氏’、‘DOB’、‘状态’、‘颜色’、‘团队’]；
/***开始：表格标题***/
附加（“”）；
对于（变量i=0；iif（iObject.keys（data）.forEach（函数（项，键）{data[item].fname}）；
我建议将html提取到模板中。这样可以清理脚本，将标记与逻辑分离开来。以下逻辑使用创建的模板，然后只需为tbody构造单元格。它使用map在字符串数组中构造单元格，然后所有字符串都会得到一个他马上就到了尸体上


var数据={
"1": {
“fname”：“Jon”，
“lname”：“Wayne”，
“dob”：“1987年5月14日”，
“状态”：“活动”，
“颜色”：“红色”，
“团队”：“迈阿密”
},
"2": {
“fname”：“Tim”，
“lname”：“Ryan”，
“dob”：“1967年1月23日”，
“状态”：“不活动”，
“颜色”：“蓝色”，
“团队”：“芝加哥”
},
"3": {
“fname”：“Jim”，
“lname”：“Carey”，
“dob”：“1997年2月11日”，
“状态”：“暂停”，
“颜色”：“黄色”，
“团队”：“丹佛”
},
"4": {
“fname”：“Chuck”，
“lname”：“Norris”，
“dob”：“1945年6月9日”，
“状态”：“活动”，
“颜色”：“绿色”，
“团队”：“波士顿”
}
}
$（“#开始”）。在（'单击'，显示记录）；
函数showRecords（）{
显示数据（1，数据）；
}
功能显示数据（fnid，数据）{
var template=$（'#tableTemplate'）.html（）；
变量$table=$（模板）；
$table.find（'tbody'）.append(
Object.keys（数据[fnid]）.map（函数（键）{
返回“”+数据[fnid][键]+“”；
})
);
$（“#容器”）.empty（）.append（$table）；
}
。显示{
宽度：500px；
背景色：红色；
}
.展示，
.显示th，
.显示运输署{
边框：1px纯蓝色；
}

名字
姓
出生日期
地位
颜色
团队
用于在对象上循环


var数据={
"1": {
“fname”：“Jon”，
“lname”：“Wayne”，
“dob”：“1987年5月14日”，
“状态”：“活动”，
“颜色”：“红色”，
“团队”：“迈阿密”
},
"2": {
“fname”：“Tim”，
“lname”：“Ryan”，
“dob”：“1967年1月23日”，
“状态”：“不活动”，
“颜色”：“蓝色”，
“团队”：“芝加哥”
},
"3": {
“fname”：“Jim”，
“lname”：“Carey”，
“dob”：“1997年2月11日”，
“状态”：“暂停”，
“颜色”：“黄色”，
“团队”：“丹佛”
},
"4": {
“fname”：“Chuck”，
“lname”：“Norris”，
“dob”：“1945年6月9日”，
“状态”：“活动”，
“颜色”：“绿色”，
“团队”：“波士顿”
}
}
$（“#开始”）。在（'单击'，显示记录）；
函数showRecords（）{
显示数据（1，数据）；
}
函数displayData（）{
常量表=$（“”）。addClass（'display'）；
Object.keys（数据）.forEach（项=>{
常量行=$（“”）；
Object.key（数据[项]）.forEach（key=>{
常量行数据=$（“”）
.addClass（“bar”）
.文本（数据[项目][关键]）；
追加（rowData）；
});
表.追加（行）；
});
$（“#容器”）.empty（）.append（表）；
}
。显示{
宽度：500px；
背景色：红色；
}
.展示，
.显示th，
.显示运输署{
边框：1px纯蓝色；
}

您需要创建tr将其附加到AD或tbody，td和th附加到tr而不是tbody。您不需要关闭任何东西。只需附加元素。（您不需要构造HTML字符串。）Yea@ChrisG在创建$（''）时是正确的您正在像inspector中一样创建DOM元素，所以您需要将该元素添加到tr而不是tbody，您在这里使用的不是字符串，而是与inspector中相同的对象。您的问题是将html与DOM元素创建混淆。html使用open和close标记来表示元素的开始和停止，因为这就是它的全部功能。但是你用javascript创建元素，这不是问题。这取决于你向元素添加所需的子元素。下面是代码，已修复：我知道如果我分离html代码，代码会更干净。另一方面，现在，
React
，
Vue
，
etc
正在实现虚拟DOM，所有html代码都是用J构建的avaScript。我也在考虑这个例子的效率，即使这个例子只有4条记录。@espresso_coffee如果你从头开始构建一个应用程序，React、Vue等都可能是竞争者。但是，如果你有一个现有的应用程序，可能更值得做这样的模板，或者用把手或胡子，我同意。在这种情况下，我正在处理旧的应用程序。我唯一使用的是JQuery库。我仍在尝试实现高效的代码，同时易于维护。我知道这一点