javascript动态合并表格相同的单元格
<!DOCTYPE html>
<html lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档 </title>
</head> <body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
<tr height="48">
<!--<td height="48" width="72">选择</td>-->
<!--<td width="72">积分表编号</td>-->
<td width="72">应用对象</td>
<td width="72">所属线条</td>
<td width="72">事件分类</td>
<td width="72">事件等次</td>
<td width="68">事件积分</td>
<td width="135">评分说明</td>
<td width="72">发文依据</td>
<td width="72">条款编号（非必填）</td>
<td width="40">备注</td>
</tr>
<tr height="50">
<!--<td height="50"> </td>-->
<!--<td>JF0001</td>-->
<td width="72">业务外包人员</td>
<td width="72">市场线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td>10</td>
<td width="135">(一) 在维护或客户服务过程中，擅自修改用户数据或局数据的行为，每次扣从业资格积分10分。</td>
<td width="72">xx分公司网运线维护外包从业人员积分管理规定</td>
<td width="72">xx分公司网运线维护外包从业人员积分管理规定分公司网运线维护外包从业人员积分管理规定<br />
第三条 、第七条</td>
<td> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0002</td>-->
<td width="72">业务外包人员</td>
<td width="72">市场线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0003</td>-->
<td width="72">业务外包人员</td>
<td width="72">市场线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0004</td>-->
<td width="72">业务外包人员</td>
<td width="72">市场线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0005</td>-->
<td width="72">业务外包人员</td>
<td width="72">市场线</td>
<td width="72">不良事件</td>
<td width="72">黑名单记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0006</td>-->
<td width="72">业务外包人员</td>
<td width="72">市场线</td>
<td width="72">不良事件</td>
<td width="72">黑名单记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0007</td>-->
<td width="72">业务外包人员</td>
<td width="72">市场线</td>
<td width="72">不良事件</td>
<td width="72">诚信记录</td>
<td> </td>
<td width="135"> </td>
<td width="72"> </td>
<td> </td>
<td> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0008</td>-->
<td width="72">业务外包人员</td>
<td width="72">市场线</td>
<td width="72">不良事件</td>
<td width="72">诚信记录</td>
<td> </td>
<td width="135"> </td>
<td width="72"> </td>
<td> </td>
<td> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0009</td>-->
<td width="72">业务外包人员</td>
<td width="72">网运线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td width="40"> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0010</td>-->
<td width="72">业务外包人员</td>
<td width="72">网运线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td width="40"> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0011</td>-->
<td width="72">业务外包人员</td>
<td width="72">网运线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td width="40"> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0012</td>-->
<td width="72">业务外包人员</td>
<td width="72">网运线</td>
<td>不良事件</td>
<td width="72">黑名单记录</td>
<td> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td width="40"> </td>
</tr>
<tr height="32">
<!--<td height="32"> </td>-->
<!--<td>JF0013</td>-->
<td width="72">业务外包人员</td>
<td width="72">网运线</td>
<td>不良事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td width="40"> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0014</td>-->
<td width="72">业务外包商</td>
<td width="72">市场线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135">待定</td>
<td width="72"> </td>
<td width="72">待定</td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0015</td>-->
<td width="72">业务外包商</td>
<td width="72">市场线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0016</td>-->
<td width="72">业务外包商</td>
<td width="72">市场线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0017</td>-->
<td width="72">业务外包商</td>
<td width="72">市场线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0018</td>-->
<td width="72">业务外包商</td>
<td width="72">市场线</td>
<td width="72">不良事件</td>
<td width="72">黑名单记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0019</td>-->
<td width="72">业务外包商</td>
<td width="72">市场线</td>
<td width="72">不良事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0020</td>-->
<td width="72">业务外包商</td>
<td width="72">市场线</td>
<td width="72">不良事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0021</td>-->
<td width="72">业务外包商</td>
<td width="72">市场线</td>
<td width="72">不良事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0022</td>-->
<td width="72">业务外包商</td>
<td width="72">网运线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135">待定</td>
<td width="72"> </td>
<td width="72">待定</td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0023</td>-->
<td width="72">业务外包商</td>
<td width="72">网运线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0024</td>-->
<td width="72">业务外包商</td>
<td width="72">网运线</td>
<td width="72">良好事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0025</td>-->
<td width="72">业务外包商</td>
<td width="72">网运线</td>
<td width="72">不良事件</td>
<td width="72">黑名单记录</td>
<td width="68"> </td>
<td width="135">待定</td>
<td width="72"> </td>
<td width="72">待定</td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0026</td>-->
<td width="72">业务外包商</td>
<td width="72">网运线</td>
<td width="72">不良事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0027</td>-->
<td width="72">业务外包商</td>
<td width="72">网运线</td>
<td width="72">不良事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
<tr height="18">
<!--<td height="18"> </td>-->
<!--<td>JF0028</td>-->
<td width="72">业务外包商</td>
<td width="72">网运线</td>
<td width="72">不良事件</td>
<td width="72">诚信记录</td>
<td width="68"> </td>
<td width="135"> </td>
<td width="72"> </td>
<td width="72"> </td>
<td> </td>
</tr>
</table> <script type="text/javascript">
window.onload = function () {
var tab = document.getElementById("tab");
//console.log(cells);
var maxCol = 2, val, count, start; // maxCol 为需要合并的列来为多少列，如3，那就是第1到第3列
// maxCol如果为1,那就是只合并第一列
// val 相同的列，
for (var col = maxCol - 1; col >= 0; col--) {
count = 1;
val = "";
for (var i = 0; i < tab.rows.length; i++) {
if (val == tab.rows[i].cells[col].innerHTML) {
console.log(tab.rows[i].cells[col]);
count++;
} else {
if (count > 1) { //合并
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + 1; j < i; j++) {
tab.rows[j].cells[col].style.display = "none";
}
count = 1;
}
val = tab.rows[i].cells[col].innerHTML;
}
//console.log(val); }
//console.log(count);
//console.log(start);
if (count > 1) { //合并，最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for (var j = start + 1; j < i; j++) {
tab.rows[j].cells[col].style.display = "none";
}
}
}
};
</script>
</body> </html>
转自：
https://www.cnblogs.com/ybixian/p/9207915.html
javascript动态合并表格相同的单元格的更多相关文章
- Javascript合并表格相同内容单元格示例
效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...
- 使用js合并table中的单元格
用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了. http://blog.csdn.net/d ...
- NX二次开发-UFUN工程图表格注释设置单元格首选项UF_TABNOT_set_cell_prefs
NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...
- Swift - 给表格添加移动单元格功能（拖动行）
1,下面的样例是给表格UITableView添加单元格移动功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,可以看到单元格后面出现拖动按钮 (3)鼠标按住拖动按钮,可以 ...
- element 动态合并表格
前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单 ...
- Spire.Cloud.SDK for Java 合并、拆分Excel单元格
Spire.Cloud.SDK for Java 是Spire.Cloud云产品系列中,用于处理Word.Excel.PowerPoint以及PDF文档的JAR文件,可执行文档编辑.转换.保存等操作. ...
随机推荐
- ServiceStack.Redis 连接有密码的Redis问题解决
在ip:port前面加上@用来表示密码,比如password@ip:port <add key="RedisServer" value="123456@127.0. ...
- ajax后台跳转无效的原因
Ajax只是利用脚本访问对应url获取数据而已,不能做除了获取返回数据以外的其它动作了.所以浏览器端是不会发起重定向的. 1)正常的http url请求,只有浏览器和服务器两个参与者.浏览器端发起一个 ...
- CMakeLists 添加 -pthread 编译选项 undefined reference to pthread_atfork
在与 main() 函数同级的 CMakeLists 中添加如下内容(根据项目实际情况修改): cmake_minimum_required (VERSION 2.6) find_package (T ...
- ~postman全局变量与环境变量介绍
postman官方文档:https://learning.getpostman.com/docs/postman/scripts/test_examples/ 一.环境变量 实例:将URL作为环境变量 ...
- PAT(B) 1068 万绿丛中一点红（C）
题目链接:1068 万绿丛中一点红 (20 point(s)) 参考博客:1068. 万绿丛中一点红(20) i逆天耗子丶 题目描述 对于计算机而言,颜色不过是像素点对应的一个 24 位的数值.现给定 ...
- beego入门笔记
Beego Learn Note 示例环境在Deepin系统下. deepin 15.9.3 ├── Beego : 1.11.2 ├── GoVersion : go1.12.4 ├── GOOS ...
- oracle update left join 写法
oracle update left join 写法 (修改某列,条件字段在关联表中) 案例: E:考核表 X,:用户表 USERNAME 关联 需求:修改营业部最高分 分析:通过登录账号的营业部OR ...
- 查看php和apache配置成功的方法
PHP配置文件是php.ini 检查php是否配置成功,在wamp/www根目录写一个phpinfo.php文件,内容为 <?php phpinfo(); ?> 然后可以打开网页输入l ...
- 快速批量删除 docker 镜像或容器
原文:快速批量删除 docker 镜像或容器 点击在我的博客 xuxusheng.com 中查看,有更好的排版哦~ docker 本身并没有提供批量删除的功能,当有大量的镜像或者容器需要删除的时候,手 ...
- 解决阿里云OSS The requested bucket name is not available的办法
今天在创建Bucket的时候遇到了这个问题 The requested bucket name is not available. The bucket namespace is shared by ...