文档章节

通过js合并表格重复出现的数据

逍遥丶蓝枫
 逍遥丶蓝枫
发布于 2017/07/08 09:06
字数 550
阅读 47
收藏 0

js必须等表格加载完成后调用。 效果如图:输入图片说明

js代码:

function uniteTable(tableId,colLength) {
	//colLength-- 需要合并单元格的列1开始
   var tb=document.getElementById(tableId);

   tb.style.display='';

    var i = 0;
    var j = 0;

    var rowCount = tb.rows.length; //   行数 
    var colCount = tb.rows[0].cells.length; //   列数 

    var obj1 = null;
    var obj2 = null;
    var obj3 = null;

    //为每个单元格命名 
    for (i = 0; i < rowCount; i++) {
        for (j = 0; j < colCount; j++) {
            tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();
        }
    }

    //合并行 
for (i = 0; i < colCount; i++) {
    if (i == colLength) break;
    obj1 = document.getElementById("tb__0_" + i.toString())
    for (j = 1; j < rowCount; j++) {
        obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
        if (obj1.innerText == obj2.innerText) {
            obj1.rowSpan++;
            obj2.parentNode.removeChild(obj2);
        } else {
            obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
        }
    }
}

//合并列
for (i = 0; i < rowCount; i++) {
    colCount = tb.rows[i].cells.length;
    obj1 = document.getElementById(tb.rows[i].cells[0].id);
    for (j = 1; j < colCount; j++) {
        if (j >= colLength) break;
        if (obj1.colSpan >= colLength) break;
        obj2 = document.getElementById(tb.rows[i].cells[j].id);
        if (obj1.innerText == obj2.innerText) {
            obj1.colSpan++;
            obj2.parentNode.removeChild(obj2);
            j = j - 1;
        }
        else {
            obj1 = obj2;
            j = j + obj1.rowSpan;
        }
    }
}
}

优化后的效果(这里只实现了合并行): 效果图如下: 输入图片说明 代码如下:

function uniteTable(tableId,colLength) {
	//colLength-- 需要合并单元格的列1开始
   var tb=document.getElementById(tableId);

   tb.style.display='';

    var i = 0;
    var j = 0;

    var rowCount = tb.rows.length; //   行数 
    var colCount = tb.rows[0].cells.length; //   列数 

    var obj1 = null;
    var obj2 = null;
    var obj3 = null;

    //为每个单元格命名 
    for (i = 0; i < rowCount; i++) {
        for (j = 0; j < colCount; j++) {
            tb.rows[i].cells[j].id = "tb__" + i.toString() + "_" + j.toString();
        }
    }

    
    //合并行  (列循环)第一行第一列均从0开始
    for (i = 0; i < colCount; i++) {
    	
    	//如果第3,4,5列不进行合并操作
        if (i == 2 || i == 3 || i == 4) continue;
        obj1 = document.getElementById("tb__0_" + i.toString())
        //(行循环)
        for (j = 1; j < rowCount; j++) {
            obj2 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
            
            if(i == 0){			//第1列全部进行合并操作
            	if (obj1.innerText == obj2.innerText) {		//判断值是否相等
                    obj1.rowSpan++;							//合并行
                    obj2.parentNode.removeChild(obj2);		//移除被合并的行
                } else {
                    obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
                }
            }else if(i == 5){	//第6列合并操作参照第2列,第二列合并了,第5列才进行合并
            	obj3 = document.getElementById("tb__" + j.toString() + "_" + (i-4).toString());
            	if (obj1.innerText == obj2.innerText && obj3 == null) {
                    obj1.rowSpan++;
                    obj2.parentNode.removeChild(obj2);
                } else {
                    obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
                }
            }else{				//只有前一列进行了合并操作后面的才会进行合并操作
            	obj3 = document.getElementById("tb__" + j.toString() + "_" + (i-1).toString());
            	if (obj1.innerText == obj2.innerText && obj3 == null) {
                    obj1.rowSpan++;
                    obj2.parentNode.removeChild(obj2);
                } else {
                    obj1 = document.getElementById("tb__" + j.toString() + "_" + i.toString());
                }
            }
        }
    }
}

© 著作权归作者所有

逍遥丶蓝枫
粉丝 1
博文 30
码字总数 19288
作品 0
青岛
程序员
私信 提问
抢先预览 ExtJS 4.2 的表格控件

在新发布的Ext JS 4.2测试版中,我们做了许多的改动。你可以在论坛公告处查看所有详细信息。在这篇文章中,我们将着重介绍性能提升的Grid组件。在之前关于Ext Js 4.1性能和基于此版本的应用的...

oschina
2013/01/23
2.9K
1
code-rhythm:写了个vscode扩展,让代码更有快感

项目地址 Github - onvno/code-rhythm 原因 写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,...

onvno_
2018/06/07
0
0
邮件中嵌入html中要注意的样式

工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部...

Js_Mei
2018/11/06
33
0
ASP.NET MVC Bundle使用 合并压缩

2017-01-06 更新 在 BundleCollection 的构造函数中添加了 3种默认规则 public BundleCollection() 启用合并压缩功能后会忽略 .intellisense.js ,-vsdoc.js, .min.js, .min.css ,所以你在B...

AALMIX
2016/12/04
0
0
Node.js一次处理10万条数据

电话销售大家一定都经历过,许多公司都有电销的团队,相信看过华尔街之狼的人肯定会理解的更加深刻。我们今天不讨论那些公司是如何通过各种渠道获取到大众的电话号码的。我有幸开发了一个需要...

一个灰
2018/10/15
319
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
今天
58
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
今天
27
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
今天
61
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
今天
57
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
今天
50
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部