如何通过JavaScript/jQuery以编程方式创建不规则表？

有一个excel，其中一些行被合并，我们需要创建一个与excel中显示的布局相同的表，并用数据库中的数据填充

布局如下所示：

我尝试了以下代码：

for (let group of group_list) {
      var table = document.createElement("table")
      table.setAttribute("id","summaryTbl");
      $('#main').append(table);
      var row = table.insertRow(0);
      row.insertCell(0).outerHTML = "<th>Column 1</th>";
      row.insertCell(1).outerHTML = "<th>Column 2</th>";
      row.insertCell(2).outerHTML = "<th>Column 3</th>";
      row.insertCell(3).outerHTML = "<th>Column 4</th>";
      $('#main').append('</thead>');

for（让组中的组列出）{
var table=document.createElement（“表”）
表.setAttribute（“id”、“summaryTbl”）；
$（'#main'）。追加（表）；
var行=table.insertRow（0）；
row.insertCell（0.outerHTML=“第1列”；
row.insertCell（1.outerHTML=“第2列”；
row.insertCell（2.outerHTML=“第3列”；
row.insertCell（3.outerHTML=“第4列”；
$（'#main'）。附加（''）；

但不知何故，它总是显示“tbody”而不是“thead”：

除以下代码外：

var table = document.createElement("table")
table.setAttribute("id","summaryTbl");
var row = table.insertRow(0);
row.insertCell(0).outerHTML = "<th>Column 1</th>";
        ...
$('#summaryTbl tr:last').after('<tr><td>'+"Test 1"+'</td>');
        ...
$('#summaryTbl').append('<tr><td>'+ "Test 2"+'</td>');

var table=document.createElement（“表”）
表.setAttribute（“id”、“summaryTbl”）；
var行=table.insertRow（0）；
row.insertCell（0.outerHTML=“第1列”；
...
$（'summaryTbl tr:last'）。在（“+”测试1“+”）之后；
...
$（'summaryTbl'）。附加（''+'测试2'+''）；

---

有没有更好的方法来生成这样一个不规则的表？使用一些JavaScript库或直接按for循环，如果有其他条件的话？

我已经看过你的文章，并尝试将其作为自己的练习，我不妨分享一下结果。 这不完全相同，因为在您的图片中，“1.1.1.1.x”填充到左边，“2.3.x.1”比其他行小，我没有做这些棘手的情况

const value=[“1.1.1.1.1”、“1.1.1.2”、“1.1.1.3”、“1.1.1.4”、“1.1.1.1.5”、“1.2.1.1.1”、“2.1.1.1”、“2.2.1.1”、“2.2.2.1.1”、“2.2.1.1”、“2.2.3.1.1”、“2.3.2.1.1”、“2.3.2.1.1”、“2.3.4.1”]
//从值创建嵌套对象
//1.2.3变成{1:{2:{3:}}
const transformedValues=（（）=>{
常量输出={}
forEach（el=>{
设tmp=输出
el.split（“.”）forEach（val=>{
如果（！tmp[val]）{
tmp[val]={}
}
tmp=tmp[val]
})
})
返回输出
})()
//查找列计数的对象最大深度
常量maxDepth=（函数rec（obj，深度=0）{
返回Math.max（depth，…Object.values（obj）.map（val=>rec（val，depth+1）））
})（转换值）
//标题名称生成器（超过26个，您将进入非字母数字）
让headerASCII=“A”。charCodeAt（0）
const getNextHeader=（）=>String.fromCharCode（headerASCII++）
//创建表
const table=document.createElement（“表”）
/*
@param{string}val已创建单元格的文本
@param{Object}对象的子对象旁边
@上次创建的参数{HTMLROWELENT | null}行
@如果需要创建新行，请使用param{boolean}newRow
@如果我们需要创建一个新的thead，则使用param{boolean}newHeader
*/
函数createTable（val，next，row，newRow=false，newHeader=false）{
//创建新标题
if（newHeader）{
const head=document.createElement（“thead”）
//深度为1的单元格（第一个单元格包含2列）
for（设i=0；iacc+childCount（el），0）| | 1}）（下一步）
行。追加子项（单元格）
//回击呼叫
Object.entries（next.forEach）（[key，value]，i）=>{
createTable（`${val}.${key}`，值，行，i！==0）
})
}
//第一个电话
Object.entries（transformedValues）.forEach（（[key，value]）=>{
createTable（键、值、null、true、true）
})
document.body.append（表）

表格{
边界塌陷：塌陷；
}
表th、表td{
边框：2件纯黑；
}
表th{
背景色：青色；
}

您需要在所需的单元格上使用

rowspan

属性。不需要库来执行此操作，它是纯HTML。