js合并table指定列
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指定列的更多相关文章
- js在table指定tr行上或底下添加tr行
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementB ...
- Js 合并 table 行 的实现方法
Js 合并 table 行 的实现方法 需求如下: 某公司的员工档案,如下, 经理看员工的信息不是很清晰: 姓名 所在学校 毕业时间 张三 小学 2000 张三 中学 2006 张三 大学 2010 ...
- 使用js合并table中的单元格
用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了. http://blog.csdn.net/d ...
- html 组装table 指定列自动换行
4列后自动换行思路:int i = 0;while (dr.Read()){ if (i % 4 == 0) 输出一行的开始 输出这个数据 if (i % 4 == 3) 输出一行 ...
- js 实现table每列可左右拖动改变列宽度 【转载】
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
- 原生js实现table表格列宽自由缩放
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...
- [转] js 实现table每列可左右拖动改变列宽度
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <tit ...
- 原生js实现 table表格列宽拖拽
查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...
- js 表格插入指定行
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementB ...
随机推荐
- ccf 201712-4 行车路线(30分超时)
问题描述 小明和小芳出去乡村玩,小明负责开车,小芳来导航. 小芳将可能的道路分为大道和小道.大道比较好走,每走1公里小明会增加1的疲劳度.小道不好走,如果连续走小道,小明的疲劳值会快速增加,连续走s公 ...
- 开启IIS的WebGarden、WebFarm和StateServer之旅
前言 公司系统虽然配置有1台NLB后拖4台App Server最后搭一台强劲无比的DB Server,但每天下午4点左右总被投诉系统慢,报表下载不了等问题.究其原因,原来NLB采用锁定sessionI ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- 解锁技能:sass + node-sass多页面应用编译(转载)
传送门:https://blog.csdn.net/wx11408115/article/details/78023466
- pysvn 相关
sudo apt-get install python-svn sudo apt-get install svn-workbench 安装过程中如果缺少相关依赖下载好在执行这两条语句 安装好之后的界面 ...
- Ansible运维自动化工具19个常用模块使用实例【转】
一.模块列表 1.setup 2.ping 3.file 4.copy 5.command 6.shell 7.script 8.cron 9.yum 10.service 11.group 12.u ...
- 【easy】107. Binary Tree Level Order Traversal II 按层输出二叉树
按层输出二叉树,广度优先. 3 / \ 9 20 / \ 15 7 [ [15,7], [9,20], [3] ] /** * Definition for a binary tree node. * ...
- vue 双向数据绑定的实现学习(二)- 监听器的实现
废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 ...
- dijistra
#include<bits/stdc++.h> using namespace std; ,maxm = ; int begin[maxn],to[maxm],next[maxm],v[m ...
- c#解决浏览器跨域问题
1.浏览器为什么不能跨域? 浏览器有一个基本的安全策略--同源策略.为保证用户的信息安全,它对不同源的文档或脚本对当前文档的读写操作做了限制.域名,子域名,端口号或协议不同都属于不同源,当脚本被认为是 ...