描述你的问题
每一级次都可能有0个或者多个,怎么用代码合并啊
需要在服务端生成类似下面的代码
不限语言,求思路
要生成的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>
贴上报错信息
要生成的效果图
已经尝试过哪些方法仍然没解决(附上相关链接)
这个其实就是依赖性合并单元格
正好我这几天在做这个事,我把我的代码贴给你看下~
源码链接: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属性 ,你试试