Jquery合并单元格(跨行)
目的:table指定列跨行合并单元格(当前行以第一列为列)
思路:循环遍历所有行,
当前行第1列与下一行第1列比较,如果相等,
则当前行rowspan=rowspan+1 (初始无rowspan则值默认为1);删除下一行单元格;(注意:单元格合并之后,下一行对应列总数减少;)如:
1 | A | A1 |
2 | A | A2 |
3 | B | B1 |
表1
1 | A | A1 |
2 | A2 | |
3 | B | B1 |
表2
表2 A的坐标为:row[0][1] rowindex为0 第一行共三列
表2 B的坐标为:row[2][1] rowindex为2 第三行共三列
表2 A2的坐标为:row[1][1] rowindex为1 第二行共两列
当合并单元格之后,下一行单元格被移除,循环遍历进行下一次比较的时候,如果继续使用列index=1再去找,则找到的不是我们需要的单元格,所以对比对象始终为第一次出现多个相同数据的行标,上图举例,第一行第二行内容相等:Row[0][1].rowspan+1,移除Row[1][1];当下一次比较,再使用Row[1][1]则取到的内容为A2而不是未合并前的A(表1),对比对象始终为Row[0][1],当前行index-单元格数据出现的次数=第一次出现A的为位置。
当前行第1列与下一行第1列比较,如果不相等,
单元格数据出现次数的变量置位0
如果不相等则:
//var columnIndex = 0; //要合并的列index
//过滤获取对象table的关键字 tableFilter="#orderGrid tbody[role='rowgroup']"
function MergeCell(columnIndex,tableFilter) {
var markspan = 0;//标记单元格中相同数据出现的次数
//判断 若只有一行数据,则不做调整
if (tr < 2) { ; } else {
//var i=1 比较当前的tr和上一个tr的值
for (var i = 0; i < tr; i++) {
var comparerowindex = parseInt(parseInt(i) - markspan);
var nextindex = i + 1;
var curcell = $(tableFilter + " tr:eq(" + comparerowindex + ") td:eq(" + columnIndex + ")");
var nextcell = $(tableFilter + " tr:eq(" + nextindex + ") td:eq(" + columnIndex + ")");
console.log("row[" + comparerowindex + "][" + columnIndex + "]" + ":" + curcell.attr("rel") + "rowspan:" + curcell.attr("rowspan"));
console.log("row[" + nextindex + "][" + columnIndex + "]" + ":" + nextcell.attr("rel") + "rowspan:" + nextcell.attr("rowspan"));
var currspan = curcell.attr("rowspan");
if (currspan == undefined || currspan == "") { curcell.attr("rowspan", 1); currspan = 1; }
if (curcell.text() == nextcell.text()) {
markspan += 1;
curcell.attr("rowspan", (parseInt(currspan) + 1));
nextcell.remove();
} else { markspan = 0; }
console.log("has " + markspan + "条数据相同合并");
}
}
}
//调用MergeCell(1,"#orderGrid tbody[role='rowgroup']");
上一篇: Android开发之TableLayout表格布局
下一篇: Java List双击事件实现方法