js动态生成复杂类型表格

本文介绍如何根据后台返回的数据,利用JavaScript动态生成包含嵌套关系和单元格合并的复杂类型表格。通过将HTML和JS代码分离,先隐藏带有按钮的TD,再在生成表格后显示每个tbody第一行的按钮TD,实现所需布局。
摘要由CSDN通过智能技术生成

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

 <table>
      <thead>
         <tr>
              <th style="width: 30%">渠道名称</th>
               <th style="width: 20%">子渠道</th>
               <th style="width: 20%">子渠道ID</th>
               <th style="width: 30%">操作</th>
          </tr>
       </thead>
</table>
<table class="tdWrap">//此处存放动态生成的tbody
</table>

js代码:

let tbody = '';//每一个主渠道都是一个单独的tbody
  if(data.code === 200){
    console.log(data)
    let d = data.data;
    if(d.length > 0){
      d.map(fu
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值