多级次怎么动态合并表格行

Question

1. 描述你的问题
   每一级次都可能有0个或者多个,怎么用代码合并啊

需要在服务端生成类似下面的代码
不限语言,求思路

1. 要生成的html代码

<table class="table bordered border">
  <tbody>
    <tr data-id="b-289f8b5c-13f0-438a-89a5-9bb8d7a47d53">
      <td rowspan="8">
        <input type="checkbox" value="289f8b5c-13f0-438a-89a5-9bb8d7a47d53" />
      </td>
      <td rowspan="8">
        <a href="PostDutyDetail.aspx?id=289f8b5c-13f0-438a-89a5-9bb8d7a47d53">
                                            a</a>
      </td>
      <td rowspan="3">
        a01
      </td>
      <td rowspan="1">
        a0101
      </td>
      <td rowspan="1">
        a010101
      </td>
    </tr>
    <tr data-id="b-8c3a0433-e7a0-46c4-9255-92f5d7e21375">
      <td rowspan="1">
        a0102
      </td>
      <td rowspan="1">
        a010201
      </td>
    </tr>
    <tr data-id="b-d73a613f-17ea-4520-be7c-c87902f94816">
      <td rowspan="1">
        a0103
      </td>
      <td rowspan="1">
        a010301
      </td>
    </tr>
    <tr data-id="b-98dcbdf4-56fc-473b-89c3-89a299788495">
      <td rowspan="2">
        a02
      </td>
      <td rowspan="2">
        a0201
      </td>
      <td rowspan="1">
        a020101
      </td>
    </tr>
    <tr data-id="b-524FD430-32A0-475F-B841-459FA983166F">
      <td rowspan="1">
        a020102
      </td>
    </tr>
    <tr data-id="b-b2532661-c1a3-4a42-8e02-9f370d5d2ab4">
      <td rowspan="3">
        a03
      </td>
      <td rowspan="1">
        a0301
      </td>
      <td rowspan="1">
        a030101
      </td>
    </tr>
    <tr data-id="b-4b687377-63e4-44a5-8baa-da90ad92f4d7">
      <td rowspan="1">
        a0302
      </td>
      <td rowspan="1">
        a030201
      </td>
    </tr>
    <tr data-id="b-623928b1-987d-4fd9-b318-fdc54f7ade10">
      <td rowspan="1">
        a0303
      </td>
      <td rowspan="1">
        a030301
      </td>
    </tr>
    <tr data-id="b-56d03a96-b887-4220-bf2d-1bf3a80395f3">
      <td rowspan="1">
        <input type="checkbox" value="56d03a96-b887-4220-bf2d-1bf3a80395f3" />
      </td>
      <td rowspan="1">
        <a href="PostDutyDetail.aspx?id=56d03a96-b887-4220-bf2d-1bf3a80395f3">
                                            b</a>
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr data-id="b-9009f1e3-4e72-4f14-be1a-f3f2c3ccca74">
      <td rowspan="1">
        <input type="checkbox" value="9009f1e3-4e72-4f14-be1a-f3f2c3ccca74" />
      </td>
      <td rowspan="1">
        <a href="PostDutyDetail.aspx?id=9009f1e3-4e72-4f14-be1a-f3f2c3ccca74">
                                            c</a>
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

1. 贴上报错信息

2. 要生成的效果图
   

3. 已经尝试过哪些方法仍然没解决（附上相关链接）

Answer 1

js 获取td 的rowspan属性 ，你试试

Answer 2

这个其实就是依赖性合并单元格

正好我这几天在做这个事，我把我的代码贴给你看下~
源码链接：http://runjs.cn/code/snyc0mbv

贴部分代码你先看下：

window.onload = function(){
  var tb = document.getElementById("table");
  var obj1;
  var obj2;
  var objtemp1 = [];
  var objtemp2 = [];
  var rowCount = tb.rows.length;
  var colCount = tb.rows[0].cells.length;
  var colLength = 4;

  //命名(表头除外)
  for (var i = 1; i < rowCount; i++) {
    for (var j = 0; j < colCount; j++) {
      tb.rows[i].cells[j].id = "tb_" + i.toString() + "_" + j.toString();
    }
  }

  //从后往前检查，进行逐列检查合并,开始列为colLength-1
  for (var col = colLength -1; col >= 0; col--) {
  //当col>0时有前方的单元格 
    if (col > 0) {
      //objtemp1为obj1左侧所有单元格集合，初始objtemp1及obj1均从第二行开始(tb_1_)
      for (var l = 0; l < col; l++) {
        objtemp1[l] = document.getElementById("tb_1_" + l.toString());
      }
    }
    obj1 = document.getElementById("tb_1_" + col.toString());

//obj2为obj1下方单元格,obj1从第二行开始，则obj2从第三行开始，遍历以row=2为起始值
    for (var row = 2; row < rowCount; row++) {
      //同obj1及objtemp1，col>0：即有前方单元格，此时有objtemp2
      if (col > 0) {
        for (var l = 0; l < col; l++) {
          objtemp2[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
        }
      }
      obj2 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());

//定义完obj1/obj2/objtemp1/objtemp2后，开始合并
//第一层判断：当obj1的值等于obj2时，即同一列的相邻单元格值相同
      if (obj1.innerText == obj2.innerText) {
//第二层判断：obj1/obj2所在列前方还有其他列：即col>0(此步判断为单元格合并的依赖性提供支持)
        if (col > 0) {
//第三层判断：obj1/obj2所在列前方还有其他列，且objtemp1,objtemp2值完全相同，可以合并
          if (checkArray(objtemp1,objtemp2)) {
            obj1.rowSpan++;
            obj2.parentNode.removeChild(obj2);
          }
//第三层判断：obj1/obj2所在列前方还有其他列，且objtemp1,objtemp2值不同，不可合并，并重新对obj1/objtemp1赋值，令其等于原来的obj2/objtemp2          
          else{
            obj1 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());
            for (var l = 0; l < col; l++) {
              objtemp1[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
            }                  
          }
        }
//第二层判断：obj1/obj2所在列为首列，直接合并
        else{
          obj1.rowSpan++;
          obj2.parentNode.removeChild(obj2);
        }
      }
//第一层判断：当obj1的值不等于obj2时，即同一列的相邻单元格值不相，此时重新对obj1/objtemp1赋值，令其等于原来的obj2/objtemp2
      else{
        obj1 = document.getElementById("tb_" + row.toString() +"_"+ col.toString());
        for (var l = 0; l < col; l++) {
          objtemp1[l] = document.getElementById("tb_" + row.toString() +"_"+ l.toString());
        }       
      }
    }
    objtemp1 = [];
    objtemp2 = [];
  }
}

我的表格合并效果如下：

Answer 3

求救啊，我要做的是一个树形table，可展开收缩，变态的是展开后要求合并单元格，，宝宝做不到啊。。