Javascript 使用json创建单个html表

此脚本生成4个jquery ui选项卡，其中包含4个html表

我如何将这些表格组合成一张表格，并附上最终表格的屏幕截图

var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"John\",\"id\":51},{\"name\":\"John\",\"id\":57},{\"name\":\"John\",\"id\":98}]}");

const setTables = new Set();
$.each(data.user, function(key, value) {
let table;
var row = $("<tr/>");

if ($('table#main_table_' + value.id).length)
    table = $("#main_table_" + value.id);
else
    table = $('<table class="table table-responsive table-hover table-bordered"></table>');
    table.attr('id', 'main_table_' + value.id);

row.append($("<td/>").text(value.name));
row.append($("<td/>").text(value.id));

table.append(row);

if(!setTables.has(value.id)) {
    table.append( $("<thead><tr><th>NAME</th><th>ID</th></tr></thead>") );
    setTables.add(value.id);
    $( "#ul-tabs" ).append("<li><a href=\"#tabs-"+ value.id +"\">"+value.name+"</a></li>");
    $( "#tabs" ).append("<div id=\"tabs-"+value.id+"\">"+table.prop('outerHTML')+"</div>");
}
});

$( "#tabs" ).tabs();

var data=$.parseJSON（“{”版本\“：\”5.2\”，““用户类型\“：”在线\“，\”用户\“：[{”姓名\“：”约翰\“，”身份\“：50}，{”姓名\“：”约翰\“，”身份\“：51}，{”姓名\“：”约翰\“，”身份\“：57}，{”姓名\“：”约翰\“，”身份\“：98}）；
const setTables=新集合（）；
$.each（数据、用户、函数（键、值）{
让我看看桌子；
变量行=$（“”）；
if（$（'table#main_table u'+value.id）.length）
table=$（“#main#u table_u”+value.id）；
其他的
表=$（''）；
table.attr（'id'，'main_table_'+value.id）；
行.append（$（“”）.text（value.name））；
行.append（$（“”）.text（value.id））；
表.追加（行）；
如果（！setTables.has（value.id））{
表.追加（$（“NAMEID”）；
add（value.id）；
$（“#ul制表符”）。追加（“
”）；
$（“#tabs”）.append（“+table.prop（'outerHTML'）+”）；
}
});
$（“#制表符”）.tabs（）；

---

.

我重构您的代码以实现这一点

“用户”类型的类型：““用户”类型：““在线”网络，”，”用户”用户”类型：“。“用户”用户”类型：“，“用户”用户：：““姓名”名称：““约翰”约翰”，，”，”身份证数据>方方方方方当事人。变量数据数据收集收集收集收集收集收集收集收集数据。数据数据收集收集收集方当事人数据。数据数据收集收集方当事人。数据数据数据数据收集收集收集收集收集。。。数据方方方当事人数据数据数据数据数据收集收集收集收集收集收集收集收集收集收集。。。方方方方方当事人。数据数据数据数据数据收集收集收集收集收集收集收集收集收集。。。。方方方方方方方数据数据数据数据收集收集收集收集收集收集收集收集收集收集收集收集收集收集收集。。。。方方方方方当事人。方方当事人。方当事人。数据数据数据收集收集收集收集收集收集收集收集收集收集收集收集。。。。。方方方方方方方方当事人。。“。“。“。“。“。“。“。“。“。“。““name\”：\“XYZ\”，\“id\”：45}，{\“name\”：\“XYZ\”，\“id\”：98}]）； 让names=data.user.map（i=>i.name） .filter（（el，i，a）=>a.indexOf（el）==i）； 函数idsForName（名称、数组）{ 返回array.filter（el=>el.name==name）.map（el=>el.id）； } 设$table=$（''）； $table.attr（'id'，'main_table'）； 设$thead=$（“”）； 设$tbody=$（“”）； 设$hRow=$（“”）.addClass（'head-row'）； if（names.length）$hRow.append（$（“”）.text（'NAME'）； name.forEach（el=>{ 设$row=$（“”）； $row.append（$（“”）.text（el））； 让ids=idsForName（el，data.user）； id.forEach（（id，索引）=>{ 设th='.th-'+索引； if（！$hRow.find（th.length）$hRow.append（$（“”）.addClass（'th-'+index）.text（'ID'））； $row.append（$（“”）.text（id））； }); $tbody.append（$row）； }); $thead.append（$hRow）； $table.append（$thead）.append（$tbody）； $（“#制表符”）.append（$table.prop（'outerHTML'））

正文{
利润率：20px；
}
th{
文本对齐：居中；
}
运输署{
文本对齐：居中；
}
桌子{
边界塌陷：分离；
}
.表格响应{
宽度：100%；
}
部门导出excel{
浮动：对；
右边填充：20px；
垫面：4px；
}
按钮#btnExport{
文本转换：大写；
字号：100；
}

---

如果要在john之后添加另一行，假设第二行的名称为XYZ，ID为1、50、45、98，该怎么办