欢迎讨论
/** * 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设置值 * */
//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格 //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #...
一个js例子实现了表格的动态合并,拆分单元格
JS合并表格,绝对实用,代码都是自己在项目中运用过的。
多于一列时,后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。 参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data 参数说明:_w_table_...
相邻表格相同数据看起来不好看,而且显得冗余,如果将相邻表格的相同数据进行合并处理,不仅看起来美观很多,而且显得更加的专业。
实现根据条件筛选行(删除多余行),再根据条件(以当前单元格与同列的上一行相同,则向上合并单元格举例)合并指定单元格。
测试用例和代码文件 博文链接:https://vectorwind.iteye.com/blog/1894606
类功能描述:该插件生成一个具有行合并的列表数据,合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可,无需后端二次处理数据。 该类以纯原生JS编写,无需引入任何第三方库。 调用方法:...
这是用WPS Excel的JS宏写的文件合并工具,可以通过对话框选择文件,把选中的Excel表格进行合并。里面包含xlsm启用宏的工作簿(js源码)和4个示例的Excel表格文件,下载不需要积分。
一个EXT+js实现的Grid表格合并的例子源码
表格相同内容单元格的合并在以前也有过类似的教程,本文为大家讲解的是使用Javascript合并,具体示例及效果图如下,感兴趣的朋友可以参考下
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰。) template: Js: data(){ return{ orderdata:null,// 后端将数据查询出来后,绑定到orderdata里
利用js合并table相同内容单元格并js方式自动生成,把文本内容复制进js中,应该就知道大概咋用了
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
本js脚本完美的实现了table单元格的合并,合并后犹如交叉表的形式,非常完美,并在其中附带例子可以验证。
(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰。) template: :span-method="objectSpanMethod4" //在el-table里面添加合并单元格属性 > Js: data(){ return...
仿Excel合并单元格实例点击合并表格单元格是合并表格里面相同的列,很实用的。
主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格,感兴趣的朋友可以参考一下