`

js合并表格相同数据列

    博客分类:
  • js
 
阅读更多

经常遇到一些数据表格,进行数据单元格合并,这次又遇到了,网上找的,用着有的并,有的不并。。一气之下,自己写了一个:

function colUnion(tb_id, sc, ec) {
	// 从sc列开始往后,直到ec列结束;sc,ec为第几列的列号
	var tb = document.getElementById(tb_id);
	var tb_rows = tb.rows.length;
	var tb_cols = tb.rows[2].cells.length;

	// 给每个单元格一个id
	for (i = 1; i < tb_rows; i++) {
		for (j = 0; j < tb_cols; j++) {
			tb.rows[i].cells[j].id = "td" + i.toString() + j.toString();
		}
	}
	// 开始合并:
	ec = ec - 1;
	sc = sc - 1;
	for (j = ec; j >= sc; j--) {
		// 行
		for (i = 1; i < tb_rows - 1; i++) {
			var obj1 = document.getElementById("td" + i.toString()
					+ j.toString());
			var obj2 = document.getElementById("td" + (i + 1) + j.toString());
			if (obj1.innerHTML == obj2.innerHTML) {
				// 前方的单元格内容一样
				if (j > 0) {
					var of1 = document.getElementById("td" + i.toString()
							+ (j - 1).toString());
					var of2 = document.getElementById("td" + (i + 1)
							+ (j - 1).toString());
					if (of1.innerHTML == of2.innerHTML) {
						obj1.id = obj2.id;
						union(obj1, obj2);
					}
				} else {
					obj1.id = obj2.id;
					union(obj1, obj2);
				}
			}
		}
	}
}

function union(obj1, obj2) {
	obj1.rowSpan++;
	obj2.parentNode.removeChild(obj2);
}

 

  • test.rar (1.7 KB)
  • 描述: 测试用例和代码文件
  • 下载次数: 1
分享到:
评论

相关推荐

    Vue Elenent实现表格相同数据列合并

    本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下 作者:秋名 思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并。(同...

    【JavaScript源代码】Vue Elenent实现表格相同数据列合并.docx

     本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下 作者:秋名 思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并。...

    js实现表格相同数据合并

    相邻表格相同数据看起来不好看,而且显得冗余,如果将相邻表格的相同数据进行合并处理,不仅看起来美观很多,而且显得更加的专业。

    ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并

    ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并; 包含原table数据排序,重组,行合并

    LayUiTable表单相同参数的单元格合并

    LayUiTable表单相同参数的单元格合并,可以几个列一起合并,注释相应完善。LayUiTable表单相同参数的单元格合并

    利用js合并table相同内容单元格并js方式自动生成

    利用js合并table相同内容单元格并js方式自动生成,把文本内容复制进js中,应该就知道大概咋用了

    vue.js实现表格合并示例代码

    最近工作中遇到一个需求,是要做一个页面放张大表格用来显示数据项,纯粹...然而又被提出了一个需求,需要相邻的相同值的行数据项进行单元格合并,这就醉了。没办法,只能想办法解决,下面通过这篇文章来一起看看吧。

    程序天下:JavaScript实例自学手册

    9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...

    《程序天下:JavaScript实例自学手册》光盘源码

    9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...

    bootstrap table实现合并单元格效果

    本文实例为大家分享了客户端运用bootstrap... * @param colspan 合并列 * @param target 目标表格对象 */ function mergeCells(data,fieldName,colspan,target){ //声明一个map计算相同属性值在data对象出现的次数和

    mergeutility:为 Google 表格和文档提供邮件合并功能的实用程序

    合并实用程序描述为 Google 表格和文档提供邮件合并功能的实用程序设置要为邮件合并文档设置此实用程序,您需要: 创建模板文档创建合并数据将实用程序脚本添加到合并数据表完成这些步骤后,您可以根据需要多次执行...

    JavaScript网页特效范例宝典源码

    7.3 对表格的行、列进行修改 311 实例199 动态制作表格 311 实例200 动态生成行或列 313 实例201 删除表中的行 314 7.4 单元格的相关操作 316 实例202 隐藏及显示单元格 316 实例203 编辑单元格中的文本信息 318 ...

    电子报表设计器雏形(版本2,最新,类似于网页版的简易Excel,附有详细注释)

    合并功能中的重复合并功能在特殊情况下会出现bug,暂时被屏蔽。 多删,多添均是删除或者添加当前被选取的单元格区域中行或者列的数目,添加时默认值为1. 折叠:拖拽行往左时该列的宽度为0或者负数时,可以实现该...

    GridManager-Angular-1.x:GridManager by Angular-1.x

    含用户调整的列宽、列顺序、列可视状态及每页显示条数序号自动生成序号列全选自动生成全选列导出静态数据导出、动态数据导出、已选数据导出打印当前页打印右键菜单常用功能在菜单中可进行快捷操作过滤通过对列进行...

    html入门到放弃笔记

    3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 :也是文本,但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接 普通文本 b : ...

    jQuery动态生成不规则表格(前后端)

    需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行。类似这种: 二、初解决:先上来把数据库的数据查询出来,以List...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r($_ENV) 73 实例042 使用可变变量输出“I Like PHP!” 73 实例...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r($_ENV) 73 实例042 使用可变变量输出“I Like PHP!” 73 实例...

Global site tag (gtag.js) - Google Analytics