js动态生成复杂类型表格

描述：根据后台返回数据，使用js动态生成复杂类型的表格。如下图：
上述表格主要实现两点即可，一个是完成后台返回数据的嵌套关系，一个是单元格合并的问题。
html代码：
在生成复杂类型表格的时候最好thead和tbody都单独使用一个table标签。

 

      

         

              
渠道名称
               
子渠道
               
子渠道ID
               
操作
          
       

//此处存放动态生成的tbody

js代码：

let tbody = '';//每一个主渠道都是一个单独的tbody
  if(data.code === 200){
    console.log(data)
    let d = data.data;
    if(d.length > 0){
      d.map(function (item,index) {
        console.log(item.partnerList)
        tbody +=`
          ${item.partnerList.length > 0 ? item.partnerList.map(function (ite,ind) {
          return ` 
                            
                                
${item.name}
                                编辑
                                
                                新增子渠道
                                
                            
                            ${ite.name}
                            ${ite.skinId}
                            
                              编辑
                              查看链接
                              ${ite.status === 1 ? '禁用' : '启用'
                            
                        `
        }) : ` 
              
                  
${item.name}
                  编辑
                  
                  新增子渠道
                  
              
              暂无                             
          `}
        `
      })
    }else{
      tbody +=`暂无数据`
    }
  }else{
    tbody +=`暂无数据`
  }
  $('.tdWrap').html(tbody);
  $('.tdWrap').find('tbody').map(function () {
     $(this).find('tr:eq(0) td:eq(0)').removeClass('hide')
  })

由于上述代码每一行tr都会生成一个带按钮的td但是这样生成的表格不是我们想要的，我们只要每个tbody的第一行tr有一个带按钮的td就可以，这样我们只要对其进行列合并就行了，所以我们先把所有带按钮的td添加hide类名让其隐藏，然后生成表格之后把每个tbody的第一行tr带按钮的td显示即可，上面使用三木运算符是因为要把所有不管有无嵌套数据的列表都显示出来。