使用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 浙江 省
如上,虽然第二列的值都为"省",
但是第一列的值不相同,所以不进行单元格的合并。
原理:
合并时会当前列的两行数据与前面列的同级两行是否一致,
如果一致才会进行合并。
如果先进行合并第一列的值,
后面合并时判断前面的列值是否一致时,所获取到的前面列的值就是空,
也就无法正常的判断的值是否一致了。
使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。的更多相关文章
- 如何让elemengUI中的表格组件相同内容的单元格自动合并
1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- View中选择的数据行中的部分数据传入到Controller中
将View中选择的数据行中的部分数据传入到Controller中 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NE ...
- 一个动态扩展表格控件列和行的 jQuery 插件
一个动态扩展表格控件列和行的 jQuery 插件 不过这并不影响使用鸭! 看这里:https://github.com/zhuwansu/table-ext.js 一个简单的示范 html <t ...
- VBA 根据Find方法根据特定内容查找单元格
http://club.excelhome.net/thread-940744-1-1.html 2. Find方法的语法[语法]<单元格区域>.Find (What,[After],[L ...
- bootstrap table表格属性、列属性、事件、方法
留存一份,原文地址http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 表格参数 表格的参数定义在 jQuery.fn.bootst ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- asp.net table表格表头及列固定实现
http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...
随机推荐
- AtCoder Beginner Contest 178 E - Dist Max 题解(推公式)
题目链接 题目大意 给你n个点(n<=2e5)要你求所有点中两个点最短的曼哈顿距离 曼哈顿距离定义为d(i,j)=|x1-x2|+|y1-y2|. 题目思路 想了很久也没有什么思路,其实就是一个 ...
- 大白话详解大数据HBase核心知识点,老刘真的很用心(2)
前言:老刘目前为明年校招而努力,写文章主要是想用大白话把自己复习的大数据知识点详细解释出来,拒绝资料上的生搬硬套,做到有自己的理解! 01 HBase知识点 第6点:HRegionServer架构 为 ...
- CentOS下构建Shell简易分发系统
bash经典收集 经典收集1 for f in `(cd .; find suite -type f | grep -v SCCS)`; \ do \ d=/usr/local/mysql/mysql ...
- CentOS 安装ElasticSearch-head插件
1 下载ElasticSearch-head安装包 1.1 Git下载ElasticSearch-head #安装git,若机器环境已存在,不需要再次安装 yum install git #下载 gi ...
- vue上传视屏或者图片到七牛云
首先下载七牛云的JavaScript-SDK npm install qiniu-js 下载完成JavaScript-SDK以后就可以上传图片信息了 <template> <div& ...
- go语言之---数组(array)和切片(slice)
一.数组 1.什么是数组? 1.数组是一系列同一类型数据的集合 2.数组中包含的每个数据被称为数组元素 3.一个数组中包含的元素个数成为数组长度 4.数组的长度是固定的 5.一个数组可以由零个或者多个 ...
- 关于Python链式赋值的赋值顺序问题
在<第4.7节 Python特色的序列解包.链式赋值.链式比较>一文中,老猿这样介绍的: 链式赋值是用一行语句将多个变量赋值为同一个值,语法如下: 变量1=变量2=变量n=赋值表达式 该语 ...
- PyQt(Python+Qt)学习随笔:QToolBox工具箱currentItem对应的index、text、name、icon、ToolTip属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在Designer中,toolBox主要有如下属性: 可以看到,toolBox的属性主要是与当前项相 ...
- DVWA SQL Injection Medium
Mdeium 基本的步骤及知识点在上节已经提到过这里不再赘述:https://blog.csdn.net/WQ_BCJ/article/details/84554777 1)与low级别不同,本次采用 ...
- jQuery笔记(一)
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...