博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端页面动态合并单元格
阅读量:4160 次
发布时间:2019-05-26

本文共 3189 字,大约阅读时间需要 10 分钟。

//多级次动态合并表格行function checkArray(arr1,arr2){    for (var i = 0; i < arr1.length; i++) {        if (arr1[i].innerText===arr2[i].innerText) {        }else{            return false;        }    }    return true;}function dynamicMergeTableRow(tableId){    var tb = document.getElementById(tableId);    var obj1;    var obj2;    var objtemp1 = [];    var objtemp2 = [];    var rowCount = tb.rows.length;    console.info(rowCount);    var colCount = tb.rows[0].cells.length;    console.info(rowCount);    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 = [];    }}dynamicMergeTableRow('table1');

转载地址:http://jbjxi.baihongyu.com/

你可能感兴趣的文章
为什么要实现程序指令和程序数据的分离?
查看>>
我对C++ string和length方法的一个长期误解------从protobuf序列化说起(没处理好会引起数据丢失、反序列化失败哦!)
查看>>
无protobuf协议情况下的反序列化------貌似无解, 其实有解!
查看>>
make -n(仅列出命令, 但不会执行)用于调试makefile
查看>>
go语言如何从终端逐行读取数据?------用bufio包
查看>>
go的值类型和引用类型------重要的概念
查看>>
求二叉树中结点的最大值(所有结点的值都是正整数)
查看>>
用go的flag包来解析命令行参数
查看>>
来玩下go的http get
查看>>
队列和栈的本质区别
查看>>
matlab中inline的用法
查看>>
如何用matlab求函数的最值?
查看>>
Git从入门到放弃
查看>>
java8采用stream对集合的常用操作
查看>>
EasySwift/YXJOnePixelLine 极其方便的画出真正的一个像素的线
查看>>
Ubuntu Linux系统下apt-get命令详解
查看>>
ubuntu 16.04 下重置 MySQL 5.7 的密码(忘记密码)
查看>>
Ubuntu Navicat for MySQL安装以及破解方案
查看>>
HTTPS那些事 用java实现HTTPS工作原理
查看>>
oracle函数trunc的使用
查看>>