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

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

  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. 已经尝试过哪些方法仍然没解决(附上相关链接)


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

正好我这几天在做这个事,我把我的代码贴给你看下~
源码链接: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 = [];
  }
}

我的表格合并效果如下:


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

【热门文章】
【热门文章】