用JavaScript动态实现单元格合并
不太想描述,大家自行理解吧,这样可能记忆会深一点儿~
<script type="text/javascript">
function mergeCells(){
var count = 0;
var oldText = '';
var oldTd;
var count2 = 0;
var oldText2 = '';
var oldTd2;
var isDelete = false;
var trs = document.getElementsByTagName("tr");
for ( var i = 0; i < trs.length; i++) {
var tds = trs[i].getElementsByTagName("td");
if(count == 0){
oldText = tds[0].innerHTML;
oldTd = tds[0];
count = 1;
}else if(oldText != tds[0].innerHTML){
oldTd.rowSpan = count;
oldText = tds[0].innerHTML;
oldTd = tds[0];
count = 1;
}else{
count = count + 1;
tds[0].parentNode.removeChild(tds[0]);
isDelete = true;
}
if(i == trs.length - 1){
oldTd.rowSpan = count;
} /*添加了一个isDelete变量,用于判断是否删除元素*/
if(count2 == 0){
oldText2 = tds[1].innerHTML;
oldTd2 = tds[1];
count2 = 1;
}else if(isDelete){
if(oldText2 != tds[0].innerHTML){
oldTd2.rowSpan = count2;
oldText2 = tds[0].innerHTML;
oldTd2 = tds[0];
count2 = 1;
}else{
count2 = count2 + 1;
tds[1].parentNode.removeChild(tds[0]);
}
isDelete = false;
}else{
if(oldText2 != tds[1].innerHTML){
oldTd2.rowSpan = count2;
oldText2 = tds[1].innerHTML;
oldTd2 = tds[1];
count2 = 1;
}else{
count2 = count2 + 1;
tds[1].parentNode.removeChild(tds[1]);
}
}
if(i == trs.length - 1){
oldTd2.rowSpan = count2;
}
}
}
mergeCells();
</script>
用JavaScript动态实现单元格合并的更多相关文章
- PHPWord中文乱码、单元格合并、动态表格模板解决方案合集
摘要: 最近一个项目开发要用到PHP技术导出Word文档,采用PHPWord插件,版本为0.6.2 beta,CodePlex已停止维护.网上还有另外一个版本的PhpWord,项目类名大小写上略有不 ...
- 关于table动态添加数据 单元格合并 数组合并
var newArr = [ {"BranchID":1,"BranchName":"城二","BranchFullName&qu ...
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
- NPOI 教程 - 2.1单元格合并
来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...
- asp.net使用控件datagrid实现表头单元格合并
合并的要点: 1.datagid的单元格合并原理是table中tr,td的布局实现; 2.合并的时机实在其datagridcreate事件中实现; 3.认识一个对象TableCellCollectio ...
- DataGridView单元格合并
本文章转载:http://www.cnblogs.com/xiaofengfeng/p/3382094.html 图: 代码就是如此简单 文件下载:DataGridView单元格合并源码 也可以参考: ...
- devexpress实现单元格合并以及依据条件合并单元格
1.devexpress实现单元格合并非常的简单,只要设置属性[AllowCellMerge=True]就可以了,实现效果如下图: 2.但是在具体要求中并非需要所有的相同单元格都合并,可能需要其他的条 ...
- SNF快速开发平台MVC-表格单元格合并组件
1. 表格单元格合并组件 1.1. 效果展示 1.1.1. 页面展现表格合并单元格 图 4.1 1.1.2. 导出excel合并单元格 图 4.2 1.2. 调用说 ...
- excel技巧--单元格合并与拆分
如果要将上图的地区列做成下图的合并单一列: 有如下做法: (以下图表格为例) 1.选择要排序的表格,点击“开始”-->排序和筛选-->自定义排序.在对话框选择“业务项目”进行排序: 2.选 ...
随机推荐
- ZT 俞敏洪:2014我要闭嘴 相信未来不是梦
俞敏洪:2014我要闭嘴 相信未来不是梦 手机免费访问www.cnfol.com2013年12月11日 08:38 中国企业家网 查看评论 字体:小 中 大中金在线微博微信加关注 扫描二维码 关注 ...
- Linux-python的一些小问题
1.python版本和pip版本 2.PATH和PYTONPATH 1.python版本和pip版本 1.python版本 一般Ubuntu里面都装的不止一个版本的python,比如有python2. ...
- mongoDB 创建数据库、删除数据库
创建数据库 use 命令 MongoDB 用 use + 数据库名称 的方式来创建数据库.use 会创建一个新的数据库,如果该数据库存在,则返回这个数据库. 语法格式 use 语句的基本格式如下: u ...
- c3p0整合mysql报错问题
启动报错: [com.mchange.v2.c3p0.DriverManagerDataSource] - Could not load driverClass com.mysql.cj.jdbc.D ...
- 线程锁的本质:线程控制、线程状态控制 while if:根据线程的关系(模式)协调线程的执行
线程锁的本质:线程控制.线程状态控制 while if https://www.cnblogs.com/feng9exe/p/8319000.html https://www.cnblogs.com/ ...
- 3.为JDeveloper添加不能的workspace
1.点击选中JDeveloper,在属性中,选中快捷方式, 可以看到目标中的值为C:\Oracle\Middleware\jdeveloper\jdeveloper.exe, 只需要在修改为C:\Or ...
- UVa 658 - It's not a Bug, it's a Feature!(Dijkstra + 隐式图搜索)
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- focal loss和ohem
公式推导:https://github.com/zimenglan-sysu-512/paper-note/blob/master/focal_loss.pdf 使用的代码:https://githu ...
- __future__模块
Python提供了__future__模块,把下一个新版本的特性导入到当前版本,于是我们就可以在当前版本中使用一些新版本的特性,比如除法: 在Python 2.x中,对于除法有两种情况,如果是整数相除 ...
- HDU 1017A Mathematical Curiosity (暴力统计特殊要求个数)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1017 A Mathematical Curiosity Time Limit: 2000/1000 M ...