使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言#
使用js方法对html中的table表格进行单元格的行列合并操作。
网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用。
所以在网上各位大神写的方法的基础上进行了部分修改以适合自己业务中的使用。
js方法#
function MergeTableCell(tableId, startRow, endRow, col) { var tb = document.getElementById(tableId); //设置为0时,检索所有行 if (endRow == 0) { endRow = tb.rows.length - 1; } //指定数据行索引大于表格行数 if (endRow >= tb.rows.length) { return; } //检测指定的列索引是否超出表格列数 if (col >= tb.rows[0].cells.length) { return; } //循环需要判断的数据行 for (var i = startRow; i < endRow; i++) { //如果当前行与下一行数据值相同,则进行前面列的判断 if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) { var Same = true; //循环跟前面的所有的同级数据行进行判断 for (var j = col; j > 0; j--) { if (tb.rows[startRow].cells[j - 1].innerHTML != tb.rows[i + 1].cells[j - 1].innerHTML) { Same = false; break; } } //如果前面的同级数据行的值均相同,则进行单元格的合并 if (true == Same) { //如果相同则删除下一行的第0列单元格 tb.rows[i + 1].cells[col].style.display = 'none'; //更新rowSpan属性 tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1; } else { //增加起始行 startRow = i + 1; } } else { //增加起始行 startRow = i + 1; } } }
说明#
1、Function:合并表格相同行的内容
2、Parameter:
tableId:表格id,
startRow:起始行(索引0开始)如果有标题行则填写1
endRow:终止行(索引值)如果填写0则自动赋值
col:需要处理的列(索引值)
3、Example
MergeTableCell("table_test", 2, 0, 1);
Para1:table_test,table表格的id
Para2:2,开始行的索引值
Para3:0,结束行的索引值
Para4:1,需要处理的列的索引值
4、Worning
(1)合并一列,正常调用
示例:MergeTableCell("table_test", 2, 0, 0);
(2)合并多列,需要将待处理的列从大到小排列
示例:合并第一列和第二列
MergeTableCell("table_test", 2, 0, 1);
MergeTableCell("table_test", 2, 0, 0);
原因:
合并第二列时,需要判断第一列的值是否相同,
如果第一列的值不相同,则不进行合并。
table col1 col2
row1 安徽 省
row2 浙江 省
如上,虽然第二列的值都为"省",
但是第一列的值不相同,所以不进行单元格的合并。
原理:
合并时会当前列的两行数据与前面列的同级两行是否一致,
如果一致才会进行合并。
如果先进行合并第一列的值,
后面合并时判断前面的列值是否一致时,所获取到的前面列的值就是空,
也就无法正常的判断的值是否一致了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了