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文件,可执行文档编辑.转换.保存等操作. ...
随机推荐
- HDOJ-1100 Trees made to order
一.题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1100 二.题目分析 对二叉树的所有形态顺序编号,编号规则是:节点数越多的编号越大:节点数相等,左子 ...
- Zuul【自定义Filter】
实际业务中,如果要自定义filter过滤器,只需集成ZuulFIlter类即可,该类是个抽象类,它实现了IZuulFIlter接口,我们需要实现几个方法,如下示例: import static org ...
- dotnet Core学习之旅(一):安装SDK
[重要:文中所有外链不能确保永久有效] >环境 .NET Core 包含两个部分 .NET Core Runtime 和 .NET Core SDK(包含Runtime) 点击此处到达下载页面( ...
- Sonya and Matrix Beauty CodeForces - 1080E (manacher)
大意: 给定$nm$字符串矩阵. 若一个子矩形每一行重排后可以满足每行每列都是回文, 那么它为好矩形. 求所有好矩形个数. 一个矩形合法等价于每一行出现次数为奇数的最多只有一个字符, 并且对称的两行对 ...
- NetLink通信原理研究、Netlink底层源码分析、以及基于Netlink_Connector套接字监控系统进程行为技术研究
1. Netlink简介 0x1:基本概念 Netlink是一个灵活,高效的”内核-用户态“.”内核-内核“.”用户态-用户态“通信机制.通过将复杂的消息拷贝和消息通知机制封装在统一的socket a ...
- nginx 禁止浏览器缓存
如果我们使用Nginx作为静态资源服务器,那么可以使用expires进行缓存控制. location /{ expires 1s; } 如果Get页面未做任何修改,服务器就是对客户端返回304 Not ...
- sublime text3 关闭更新提醒
Preferences->settings 在Preferences.sublime-setting --User中 增加: "update_check":false,
- 如何封装属于自己的WPF控件库
在网上找了一下,发现这方面的资料并不多.做传统桌面的本来就不多了吧,更别说WPF了.我可能也要另寻出路了,不过我还是觉得做桌面挺有意思的. 言归正传 首先,新建一个WPF自定义控件库项目 这里我们封 ...
- ef core数据迁移的一点小感悟
ef core在针对mysql数据迁移的时候,有些时候没法迁移...有两种情况没法迁移,一种是因为efcore的bug问题导致没法迁移,这个在github上有个问题集,另外一种是对数据表进行较大幅度的 ...
- 在vue项目中使用live2d
成品如图: 那么几步简单说明怎么用吧: 第一,先去github上下载相应的静态资源: https://github.com/xiazeyu/live2d-widget-models 第二,将packg ...