如何使用JavaScript将动态“colspan”放入HTML表

我有一个HTML表，它需要

colspan

，但我不知道如何才能做到这一点

目前，我正在使用

/

来分隔一列表中的值，但在

UI

上这看起来不太好，很难理解哪个是什么

我的代码片段

$（文档）.ready（函数（）{
常数数据=[{
“出口”：“S0001”，
“账单日期”：“2018-08-22”，
“金额”：418418，
“账单计数”：“3471”
}, {
“出口”：“S0001”，
“账单日期”：“2018-08-23”，
“金额”：319472，
“账单计数”：“3050”
}, {
“出口”：“S0001”，
“账单日期”：“2018-08-24”，
“金额”：300111，
“billcount”：“2824”
}, {
“出口”：“S0001”，
“账单日期”：“2018-08-25”，
“金额”：452893，
“账单计数”：“3622”
}, {
“出口”：“S0002”，
“账单日期”：“2018-08-22”，
“金额”：87390，
“账单计数”：“1054”
}, {
“出口”：“S0002”，
“账单日期”：“2018-08-23”，
“金额”：67142，
“billcount”：“950”
}, {
“出口”：“S0002”，
“账单日期”：“2018-08-24”，
“金额”：50997，
“账单计数”：“741”
}, {
“出口”：“S0002”，
“账单日期”：“2018-08-25”，
“金额”：94641，
“billcount”：“1072”
}, {
“出口”：“S0009”，
“账单日期”：“2018-08-22”，
“金额”：77922，
“billcount”：“308”
}, {
“出口”：“S0009”，
“账单日期”：“2018-08-23”，
“金额”：56506，
“账单计数”：“236”
}, {
“出口”：“S0009”，
“账单日期”：“2018-08-24”，
“金额”：57926，
“billcount”：“232”
}, {
“出口”：“S0009”，
“账单日期”：“2018-08-25”，
“金额”：126538，
“账单计数”：“476”
}]
让formatData=函数（数据）{
让billdates=[]；
让出口=[]；
data.forEach（元素=>{
if（billdates.indexOf（element.billdate）=-1）{
推送（element.billdate）；
}
if（出口指数）（元件出口）=-1）{
插座。推动（元件。插座）；
}
});
返回{
数据：数据，
billdates:billdates，
出口：出口，
};
};
让renderTable=函数（数据）{
billdates=data.billdates；
出口=数据出口；
data=data.data；
设tbl=document.getElementById（“tbl1”）；
让table=document.createElement（“table”）；
设thead=document.createElement（“thead”）；
让headerRow=document.createElement（“tr”）；
设th=document.createElement（“th”）；
th.innerHTML=“账单日期”；
头颅附属器（th）；
设grandTotal=0；
让grandbillcount=0；
让outletWiseTotal={}；
让outletWiseBillCount={}；
th=document.createElement（“th”）；
th.innerHTML=“Total1”；
头颅附属器（th）；
outlets.forEach（元素=>{
调试器；
th=document.createElement（“th”）；
th.innerHTML=元素；
头颅附属器（th）；
outletWiseTotal[元素]=0；
outletWiseBillCount[元素]=0；
data.forEach（el=>{
如果（出口标高==元件）{
outletWiseTotal[element]+=parseInt（el.amount）；
outletWiseBillCount[element]+=parseInt（el.billcount）；
}
});
grandTotal+=outletWiseTotal[元素]；
grandbillcount+=outletWiseBillCount[元素]；
});
附肢儿童（头颅）；
headerRow=document.createElement（“tr”）；
th=document.createElement（“td”）；
th.innerHTML=“子菜单”；
头颅附属器（th）；
对于（i=0；i<1.length+1；i++）{
th=document.createElement（“td”）；
th.innerHTML=“billcount/netamount”；
头颅附属器（th）；
}
headerRow.insertBefore（th，headerRow.children[1]）；
附肢儿童（头颅）；
表1.儿童（thead）；
headerRow=document.createElement（“tr”）；
td=document.createElement（“td”）；
td.innerHTML=“总计”；
头畸形儿（td）；
outlets.forEach（元素=>{
td=document.createElement（“td”）；
td.innerHTML=outletWiseBillCount[element]+“/”+outletWiseTotal[element]；
td.classList.add（“文本右侧”）；
头畸形儿（td）；
});
td=document.createElement（“td”）；
td.innerHTML=grandbillcount+“/”+grandTotal；
td.classList.add（“文本右侧”）；
headerRow.insertBefore（td，headerRow.children[1]）；
附肢儿童（头颅）；
表1.儿童（thead）；
让tbody=document.createElement（“tbody”）；
billdates.forEach（元素=>{
让row=document.createElement（“tr”）；
td=document.createElement（“td”）；
td.innerHTML=元素；
世界其他地区（td）；
设total=0；
设totalBCount=0；
outlets.forEach（outlets=>{
设el=0；
设bc=0；
data.forEach（d=>{
如果（d.billdate==元素&d.outlet==出口）{
总计+=解析整数（d.金额）；
totalBCount+=parseInt（d.billcount）；
el=d.金额；
bc=d.billcount；
}
});
td=document.createElement（“td”）；
td.innerHTML=bc+“/”+el；
td.classList.add（“文本右侧”）；
世界其他地区（td）；
});
/*log（“行为：”，row.children）*/
td=document.createElement（“td”）；
td.innerHTML=totalBCount+“/”+总计；
td.classList.add（“文本右侧”）；
//世界其他地区（td）；
行插入前（td，行子项[1]）；
tbody.appendChild（世界其他地区）；
});
表3.儿童（t身体）；
tbl.innerHTML=“”；
tbl.附件（表）；
表.classList.add（“表”）；
table.classList.add（“带条纹的表”）；
table.classList.add（“带边框的表”）；
table.classList.add（“表悬停”）；
}
设FormattedData=FormattData（数据）；
可渲染（格式化数据）；
});

使用设置属性

使用相同的模式在行下添加表


const数据=[{
“出口”：“S0001”，
“账单日期”：“2018-08-22”，
“金额”：418418，
”“比尔伯爵
th = document.createElement("th");
th.setAttribute("colspan", "2");