`

JS 合并表格(方法一)

阅读更多

欢迎讨论

/**
 * table单元格合并
 * 合并规则:要合并的多个td name属性相同,且呈方形连续分布
 * @param {string} tableId
 */
function combineTable(tableId) {
	var oTbl = document.getElementById(tableId);
	var allTds = oTbl.getElementsByTagName("td");
	if(allTds.length < 1) {
		return;
	}
	
	//step 1:查找需要合并的td,规则:相同name出现超过两次的td,就是需要合并的
	var map = new Object();
	for(var i = 0; i < allTds.length; i++) {
		var tmpTdName = allTds[i].getAttribute("name");

		if(tmpTdName) {
			map[tmpTdName] = !map[tmpTdName] ? 1 : Number(map[tmpTdName]) + 1;
		}
	}

	var tdNames = new Array();
	for(var i in map) {
		if(Number(map[i]) > 1) {
			tdNames.push(i);
		}		
	}
	
	//step2 combine tds
        //解决IE下面getElementsByName无效问题
	var commonGetElementsByName = function(parentDom, tagName, name) {
		var result = new Array();
		var doms = parentDom.getElementsByTagName(tagName);

		for (var i = 0; i < doms.length; i++) {
			if (doms[i].getAttribute("name") == name) {
				result.push(doms[i]);
			}
		}

		return result;
	};
	
	var tdsToDelete = new Array();
	for (var i = 0; i < tdNames.length; i++) {
		var tdsToCombine = commonGetElementsByName(oTbl, "td", tdNames[i]);
		var tdFirst = tdsToCombine[0];
		var tdLast = tdsToCombine[tdsToCombine.length - 1];
		var colspan = tdLast.cellIndex - tdFirst.cellIndex + 1;
		var rowspan = 1;
		
		for (var j = 0; j < tdsToCombine.length; j++) {
			var aTd = tdsToCombine[j];
			
			//calculate rowspan
			if (j > 0 && tdsToCombine[j].parentNode != tdsToCombine[j - 1].parentNode) {
				rowspan++;
			}

			//暂存要删除的
			if (aTd != tdFirst) {
				tdsToDelete.push(aTd);
			}
		}

		if(colspan > 1) {
			tdFirst.setAttribute("colspan", colspan);
			tdFirst.colSpan = colspan;
		}
		if(rowspan > 1) {
			tdFirst.setAttribute("rowspan", rowspan);
			tdFirst.rowSpan = rowspan;
		}
	}
	
	//delete at last
	for (var i = 0; i < tdsToDelete.length; i++) {
		tdsToDelete[i].parentNode.removeChild(tdsToDelete[i]);
	}
}

 

分享到:
评论

相关推荐

    使用javascript合并表格

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

    js实现表格相同数据合并

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

    js合并表格相同数据列

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

    JS合并表格

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

    表格行列合并JS

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

    javascript实现筛选、合并表格

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

    js动态表格合并拆分行

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

    表格单元格合并js

    多于一列时,后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。 参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data 参数说明:_w_table_...

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

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

    微信小程序表格合并demo

    总之,“微信小程序表格合并demo”是一个实战性的教学示例,通过学习这个项目,开发者不仅可以掌握微信小程序的基础架构,还能了解到如何在小程序中进行数据驱动的界面构建,以及如何利用CSS和JavaScript实现复杂的...

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

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

    EXTjs4.0以下合并表格

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

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

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

    jquery合并表格行记录

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

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

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

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

    类功能描述:该插件生成一个具有行合并的列表数据,合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可,无需后端二次处理数据。 该类以纯原生JS编写,无需引入任何第三方库。 调用方法:...

    表格合并table单元合并

    递归是一种非常有效的实现表格合并的方法,特别是在处理多层次的嵌套合并时。递归的基本思路是将大问题分解为小问题,直到达到可以直接解决的最小子问题。 假设我们有一个嵌套的对象`o`表示表格,可以设计一个递归...

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

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

    bootstrap表格列合并

    以下是一种实现方法: 1. **创建基本表格结构**:首先,创建一个基础的Bootstrap表格,确保每个`&lt;tr&gt;`内有四个`&lt;td&gt;`。 ```html 标题1 标题2 标题3 标题4 数据1 数据2 数据3 数据4 &lt;!-- ...

    element 合并表格头部

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

Global site tag (gtag.js) - Google Analytics