`

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
分享到:
评论

相关推荐

    js实现表格相同数据合并

    在给定的文件中,`test.html`可能是用来展示合并表格效果的示例页面,而`jquery-2.0.3.min.js`是jQuery库的文件,用于支持JavaScript代码。你可以通过打开`test.html`并查看源代码,学习如何在实际项目中应用上述...

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

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

    EasyUI指定列-合并相同数据行

    在日常的数据处理过程中,经常会遇到需要对表格中的重复数据进行整理的情况。EasyUI作为一种轻量级的用户界面库,提供了丰富的功能来帮助开发者高效地处理这类问题。其中,“合并相同数据行”是一个非常实用的功能,...

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

    【Vue Element实现表格相同数据列合并】 在前端开发中,我们常常需要处理表格展示数据的情况。Vue Element UI 是一个基于 Vue.js 的组件库,提供了丰富的 UI 组件,其中包括表格(el-table)。当表格中的某一列数据...

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

    当表格数据中存在相同参数时,我们可以将这些参数对应的单元格合并为一个,减少重复信息,增强视觉效果。下面我们将详细探讨如何操作。 1. **理解LayUI Table的基础使用** 在使用单元格合并功能前,我们需要了解...

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

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

    JS 实现Table相同行的单元格自动合并示例代码

    在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性,尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...

    nui或者miniui中gird合并重复行数据,查找某行

    合并重复行数据通常是指当表格中有两行或多行的数据完全相同或部分字段相同时,将它们合并为一行,并将重复项的某些数值字段进行累加或合并。这样做的目的是减少冗余数据,提高数据展示效率。 #### 2.2 实现步骤 ...

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

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

    列表多行多列合并单元格

    在Web开发中,尤其是构建数据报表时,列表多行多列合并单元格是一个常见的需求。这通常涉及到HTML、CSS和JavaScript技术的综合运用,尤其是在使用表格(table)元素展示数据时。下面将详细讲解如何实现这个功能。 ...

    Gridcontrol合并表头、合并行、冻结列

    可以通过设置`GridView.OptionsView.ShowGroups`为`true`来启用分组功能,然后对数据源进行分组操作,GridControl会自动合并相同值的行。如果需要自定义合并规则,可以重写`GridView.OnRowCellMerge`事件,根据需求...

    合并table的行

    当面对大量重复或相似的数据时,合并表格行的功能可以极大地提升数据展示的清晰度和用户体验。本文将深入探讨如何实现“合并table的行”这一功能,以及其背后的原理与应用场景。 ### 合并table的行:原理与实现 在...

    javascript实现筛选、合并表格

    在JavaScript编程中,处理表格数据是一项常见的任务,尤其是在前端开发中。本篇文章将详细探讨如何利用JavaScript实现基于特定条件的筛选和单元格合并功能。首先,我们从筛选表格开始。 筛选表格是根据预设条件过滤...

    js自动合并相同单元格Demo

    `js自动合并相同单元格Demo`是一个关于如何在JavaScript中实现动态生成表格并自动合并相同单元格的示例。这个插件尤其适用于数据量较大且存在重复信息的场景,可以有效提升表格的可读性和美观性。 首先,我们要理解...

    Javascript合并表格中具有相同内容单元格示例

    综上所述,通过JavaScript合并表格中具有相同内容的单元格,可以有效地简化表格结构,提高信息展示的效率和美观度。在实现时,需要综合运用HTML、CSS和JavaScript的知识,特别注意DOM操作和属性设置的准确性,以确保...

    jquery table 合并相同列

    首先,理解需求:在表格中,如果相邻的列(column)内容相同,我们将其合并成一个单元格,只显示一次内容,这样可以使表格看起来更整洁,减少重复信息,从而提升用户对页面内容的理解和感知。 要实现这个功能,我们...

    layui table合并单元格.zip

    在layui中,我们可以利用表格的`render`方法渲染数据,并通过JavaScript逻辑判断哪些单元格需要合并。通常,这涉及到对数据源的分析,找出需要合并的行或列。例如,如果连续几行有相同的数据,那么它们对应的单元格...

    javascript万能table合并单元格,隐藏列 html版

    例如,在报表展示或者数据汇总场景中,通过合并单元格可以使得表格更加简洁明了,而隐藏不必要的列则可以让用户更专注于重要的数据。 #### 二、代码解析 本文将详细介绍如何使用 JavaScript 实现上述功能,并结合...

    jquery datatable 单元格合并

    在某些场景下,我们可能需要对表格中的单元格进行合并,以便更好地展示数据,例如汇总或者分类。本篇将详细介绍如何使用jQuery DataTables结合JavaScript来实现相同内容单元格的动态合并。 首先,我们需要理解...

Global site tag (gtag.js) - Google Analytics