`

JS 合并表格(方法二)

 
阅读更多
function combineTable2(tableId) {
	var oTbl = document.getElementById(tableId); 
	var tdsToCombine = [];
	var allTds = [];
	for(var i = 0; i < oTbl.rows.length; i++){
		for(var j = 0; j < oTbl.rows[i].cells.length; j++){
			var name = oTbl.rows[i].cells[j].getAttribute("name");
			var obj = new Object();
			obj.name = name;
			obj.row = i;
			obj.cell = j;
			allTds.push(obj);		
			
			if(name) {
				var nameExists = false;
				for(var k = 0; k < tdsToCombine.length; k++) {
					if(tdsToCombine[k].name == name) {
						nameExists = true;
						break;
					}
				}
				if(!nameExists) {
					tdsToCombine.push(obj);	
				}				
			}
		}
	}

	var delArr = [];
	for(var c = 0; c < tdsToCombine.length; c++){
		var o1 = tdsToCombine[c];
		var beginIndex = o1.row * oTbl.rows.length + o1.cell + 1;
		for(var d = beginIndex; d < allTds.length;d++){
			var o2 = allTds[d];
			if(o2.name == o1.name){
				if(o2.row == o1.row && o2.cell != o1.cell ){
					oTbl.rows[o1.row].cells[o1.cell].colSpan++;
				} else if(o2.cell == o1.cell && o2.row != o1.row ){
					oTbl.rows[o1.row].cells[o1.cell].rowSpan++;	
				}				
				delArr.push(oTbl.rows[o2.row].cells[o2.cell]);
			}
		}
	}
	
	for(var i = 0; i < delArr.length; i++) {
		delArr[i].parentNode.removeChild(delArr[i]);
	}
}

 

分享到:
评论

相关推荐

    js实现表格相同数据合并

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

    使用javascript合并表格

    /* * 说明: * 表格第一列为标题列,列数以第一列为基准, * 列合并设置 : 在列元素上添加 ... * 如果整个表格中的行都要合并请设置第一列的colspans超过表格列最大值 * 的数,并且其它列取消colspans设置值 * */

    js合并表格相同数据列

    在JavaScript编程中,合并表格相同数据列是一种常见的需求,特别是在数据展示或数据分析中。这个任务通常涉及对HTML表格(`&lt;table&gt;`元素)的操作,尤其是处理具有大量重复数据的列。在给定的资源中,"colm2.html"...

    JS合并表格

    "JS合并表格"这个主题,涉及到的技术点主要包括HTML表格的基本结构、CSS样式控制、JavaScript操作DOM以及可能涉及到的jQuery库或者自定义函数。下面将详细介绍这些知识点。 首先,HTML表格是网页中展示数据的重要...

    javascript实现筛选、合并表格

    以上就是利用JavaScript实现表格筛选和单元格合并的基本方法。在开发过程中,还需要注意性能优化,避免因大量DOM操作导致页面卡顿。可以考虑使用虚拟DOM技术,或者在操作大量数据时使用数组处理,减少对实际表格的...

    js动态表格合并拆分行

    一个js例子实现了表格的动态合并,拆分单元格

    表格行列合并JS

    //函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格 //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #...

    表格单元格合并js

    函数说明:合并指定表格(表格id为_w_table_id)指定列 (行数大于_w_table_mincolnum 小于_w_table_maxcolnum)相同列中的相同文本的相邻单元格 多于一列时,后一列的单元格合并范围不能超过前一列的合并范围。...

    微信小程序表格合并demo

    例如,你可能在这里定义一个二维数组来表示表格的数据结构,其中空单元格表示合并的范围。同时,当用户触发某些操作,如点击或滑动时,你需要在`index.js`中编写对应的事件处理器,更新数据模型,从而反映到界面上。...

    EXTjs4.0以下合并表格

    7. **CSS样式**: 除了JavaScript代码,合并表格还可能需要CSS来调整单元格的边界和间距,使其看起来像是被合并了一样。例如,使用`display: table-cell`和`border-collapse: collapse`等样式属性。 8. **性能优化**...

    WPS的js宏写的Excel文件合并工具,通过文件对话框选择文件来合并表格

    为了解决这一问题,WPS Office提供了使用JavaScript(简称JS)宏编程的方式来自动化合并Excel文件的功能。本文将详细介绍一个基于WPS Excel的JS宏编写的文件合并工具,帮助用户提升工作效率。 首先,这个工具的核心...

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

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

    原生JS实现HTML- TABLE 自动行合并插件

    开发者提供已排序的数据列表以及需要合并行的列名即可,无需后端二次处理数据。 该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情...

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...

    jquery合并表格行记录

    本文将围绕“jquery合并表格行记录”这一主题展开,探讨如何利用jQuery实现表格数据的合并,提高数据展示的可读性。 首先,表格(Table)在网页中用于展示结构化数据,但在显示大量重复数据时,可能会显得过于冗余...

    表格合并table单元合并

    ### 表格合并table单元合并知识点详解 ...理解表格合并的基本概念、原则以及具体的实现方法,对于处理复杂的表格数据至关重要。通过对上述示例的分析,可以看出使用嵌套对象和递归函数是实现高效表格合并的有效途径。

    bootstrap表格列合并

    本篇文章将详细探讨如何在Bootstrap中实现表格列合并,特别是按照每四列进行合并的技巧。 首先,理解Bootstrap表格的基本结构至关重要。一个Bootstrap表格由`&lt;table&gt;`标签开启,内部包含`&lt;thead&gt;`(表头)、`...

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

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

    element 合并表格头部

    要实现“合并表格头部”的功能,我们需要利用`table-column`组件的`type`属性和`span-method`属性。`type`属性可以设置为`index`、`selection`或`expand`,但我们在这里关注的是`span-method`。`span-method`是一个...

    一个EXT+js实现的Grid表格合并的例子源码

    "一个EXT+js实现的Grid表格合并的例子源码"这个资源应该包含了如何利用EXT和JavaScript来实现Grid表格合并的示例代码。实现这种方式通常需要对EXT Grid的配置和渲染过程有深入的理解,包括使用CellEditing插件、...

Global site tag (gtag.js) - Google Analytics