用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.选 ...
随机推荐
- 关于微信公账号H5 API 调用的坑 BUG
页面A已经配置过,如果是单页面跳转,则页面B可以共享当前的SDK配置(至少菜单是这样的) 刷新页面,原先的菜单仍然会保持原样,只是调用SDK已经失效了,需要重新配置,重新配置后,菜单仍然会保持原样(如 ...
- webpack之react开发前准备
今天抽出空来,翻了翻webpack之react的书籍,看到刚出的es6语法,貌似是简单了不少,但是兼容性确实不容乐观,如果实在要用那也不是不可以的,首先就跟随我来看下这个插件吧: Babel:这个插件 ...
- python UI自动化实战记录十:执行测试及测试报告
使用简单的unittest.TextTestRunner. 思路: 1 在report目录下创建当日测试报告目录 20190113 2 创建测试报告文件 f = 时间戳.txt 3 加载测试集,运行测 ...
- ASN.1详解
Chapter 4 ASN.1 4.1 网络数据表示及编码4.2 ASN.1的基本概念4.3 基本编码规则 4.1 网络数据表示及编码ASN.1(Abstract Syntax Notation 1) ...
- angular里forRoot的作用
模块A是这样定义的 @NgModule({ providers: [AService], declarations: [ TitleComponent ], exports: [ TitleCompo ...
- css 17课--
---------------------------------------------------------------------------------------------------- ...
- perl的一些小函数——split、join、sort
有时候,我们需要将一个字符串或一行文本通过某种方式转换为单个的元素存储在数组中,或者将许多元素通过某种分割符,将他们组合成一个字符串.perl刚好就提供了这样的功能,通过split或者join分割或组 ...
- thinkphp5.0查询到的数据表中的路径是反斜杠导致无法正常显示图片怎么办?
添加到数据表中图片的路径有时会是反斜杠,这就导致了在url后面写路径的时候会识别不出来(不过src后面写路径就可以识别),所以就需要把路径中的反斜杠替换成正斜杠,代码如下: $datu = Db::q ...
- web.xml中Listener的作用
Servlet的监听器Listener,它是实现了javax.servlet.ServletContextListener 接口的服务器端程序,它也是随web应用的启动而启动,只初始化一次,随web应 ...
- image_pyradid和自己的一些训练经验总结
这是训练的路锥.警示柱的数据,也就是小物体的.小物体有两个定义,一个是本身像素少,另一个是物体相对于整张图片的比例小 这是把图片缩小到600 proposal_target_layer选取用来训练的p ...