欢迎讨论
/** * 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]); } }
相关推荐
/* * 说明: * 表格第一列为标题列,列数以第一列为基准, * 列合并设置 : 在列元素上添加 ... * 如果整个表格中的行都要合并请设置第一列的colspans超过表格列最大值 * 的数,并且其它列取消colspans设置值 * */
在给定的文件中,`test.html`可能是用来展示合并表格效果的示例页面,而`jquery-2.0.3.min.js`是jQuery库的文件,用于支持JavaScript代码。你可以通过打开`test.html`并查看源代码,学习如何在实际项目中应用上述...
在JavaScript编程中,合并表格相同数据列是一种常见的需求,特别是在数据展示或数据分析中。这个任务通常涉及对HTML表格(`<table>`元素)的操作,尤其是处理具有大量重复数据的列。在给定的资源中,"colm2.html"...
"JS合并表格"这个主题,涉及到的技术点主要包括HTML表格的基本结构、CSS样式控制、JavaScript操作DOM以及可能涉及到的jQuery库或者自定义函数。下面将详细介绍这些知识点。 首先,HTML表格是网页中展示数据的重要...
//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格 //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #...
以上就是利用JavaScript实现表格筛选和单元格合并的基本方法。在开发过程中,还需要注意性能优化,避免因大量DOM操作导致页面卡顿。可以考虑使用虚拟DOM技术,或者在操作大量数据时使用数组处理,减少对实际表格的...
一个js例子实现了表格的动态合并,拆分单元格
多于一列时,后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。 参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data 参数说明:_w_table_...
为了解决这一问题,WPS Office提供了使用JavaScript(简称JS)宏编程的方式来自动化合并Excel文件的功能。本文将详细介绍一个基于WPS Excel的JS宏编写的文件合并工具,帮助用户提升工作效率。 首先,这个工具的核心...
总之,“微信小程序表格合并demo”是一个实战性的教学示例,通过学习这个项目,开发者不仅可以掌握微信小程序的基础架构,还能了解到如何在小程序中进行数据驱动的界面构建,以及如何利用CSS和JavaScript实现复杂的...
在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...
7. **CSS样式**: 除了JavaScript代码,合并表格还可能需要CSS来调整单元格的边界和间距,使其看起来像是被合并了一样。例如,使用`display: table-cell`和`border-collapse: collapse`等样式属性。 8. **性能优化**...
综上所述,通过JavaScript合并表格中具有相同内容的单元格,可以有效地简化表格结构,提高信息展示的效率和美观度。在实现时,需要综合运用HTML、CSS和JavaScript的知识,特别注意DOM操作和属性设置的准确性,以确保...
本文将围绕“jquery合并表格行记录”这一主题展开,探讨如何利用jQuery实现表格数据的合并,提高数据展示的可读性。 首先,表格(Table)在网页中用于展示结构化数据,但在显示大量重复数据时,可能会显得过于冗余...
"一个EXT+js实现的Grid表格合并的例子源码"这个资源应该包含了如何利用EXT和JavaScript来实现Grid表格合并的示例代码。实现这种方式通常需要对EXT Grid的配置和渲染过程有深入的理解,包括使用CellEditing插件、...
类功能描述:该插件生成一个具有行合并的列表数据,合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可,无需后端二次处理数据。 该类以纯原生JS编写,无需引入任何第三方库。 调用方法:...
递归是一种非常有效的实现表格合并的方法,特别是在处理多层次的嵌套合并时。递归的基本思路是将大问题分解为小问题,直到达到可以直接解决的最小子问题。 假设我们有一个嵌套的对象`o`表示表格,可以设计一个递归...
在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性,尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...
以下是一种实现方法: 1. **创建基本表格结构**:首先,创建一个基础的Bootstrap表格,确保每个`<tr>`内有四个`<td>`。 ```html 标题1 标题2 标题3 标题4 数据1 数据2 数据3 数据4 <!-- ...
要实现“合并表格头部”的功能,我们需要利用`table-column`组件的`type`属性和`span-method`属性。`type`属性可以设置为`index`、`selection`或`expand`,但我们在这里关注的是`span-method`。`span-method`是一个...