js实现table合并相同列单元格
/**
* Created with JetBrains WebStorm.
* User: Johnny
* Date: 18-3-26
* Time: 下午4:48
* Table td 相同值合并行 要求:
* 1.table 必须包含tbody,tbody为数据主休
* 2.table 添加 id="kbdatas"
* 调用说明:
* $(function(){
* mergeRowSpan(4);
* });
*/
function uuidStr() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
} function merge(icol){
var tdTxt = "";
var list_map = new Array();
var uuid = uuidStr();
$("#kbdatas").find("tbody tr").each(function(){
var rmnode = $(this).attr("rmnode");
if(rmnode==null||rmnode==undefined||rmnode==""){
rmnode = 0;
}
var icolIndex = icol-rmnode;
var txt = $(this).find("td:eq("+icolIndex+")").text().trim();
if(tdTxt != txt){
uuid = uuidStr();
list_map.push(uuid);
tdTxt = txt;
}
$(this).find("td:eq("+icolIndex+")").attr("tduuid",uuid);
});
for(var i = 0; i < list_map.length; i++){
var tduuid = list_map[i];
$("#kbdatas").find("td[tduuid='"+tduuid+"']").each(function(index,el){
var tdlg = $("#kbdatas").find("td[tduuid='"+tduuid+"']").length;
if(0==index){
$(el).attr("rowspan",tdlg);
} else {
var rmnode = $(el).parent().attr("rmnode");
if(rmnode==null||rmnode==undefined||rmnode==""){
rmnode = 1;
} else {
rmnode++;
}
$(el).parent().attr("rmnode",rmnode);
$(el).remove();
}
});
}
}
function mergeRowSpan(colCount){
for(var icol = 0; icol < colCount; icol++){ merge(icol); }
}
js实现table合并相同列单元格的更多相关文章
- JS 实现Table相同行的单元格自动合并示例代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- Excel 批量快速合并相同的单元格:数据透视表、宏代码、分类汇总
Excel 批量快速合并相同的单元格 在制作Excel表格的时候,为了使得自己制作的报表更加简洁明了,方便查阅,经常需要合并很多相同的单元格,如果有几千几万条记录需要合并的话,真的会让人发疯.怎样 ...
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
Visual Studio 2017中使用正则修改部分内容 最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...
- PHPExcel合并与拆分单元格
$objPHPExcel; $filepath="c:\temp.xlsx"; try { $objReader = PHPExcel_IOFactory::createRea ...
- mysql GROUP_CONCAT 函数 将相同的键的多个单元格合并到一个单元格
mysql GROUP_CONCAT 函数 将相同的键的多个单元格合并到一个单元格 MemberID MemberName FruitName -------------- ------------- ...
- 关于table动态添加数据 单元格合并 数组合并
var newArr = [ {"BranchID":1,"BranchName":"城二","BranchFullName&qu ...
- Excel 两列单元格合并超级链接的VBA 写法
Excel 单元格 分两列 (B列存放姓名, C列存放链接) 列如: 姓名 学号 博客地址 1309032022 李汉超 http://www.cnblogs.com/Vpygamalion/ 141 ...
- element-ui table 最后一行合计,单元格合并
接着写两个方法--最后一行合计的方法 --单元格合并的方法 先写一个rowspan方法,计算出spanArr数组是怎么单元格合并的,注意rowspan方法要在渲染完成之前使用,可以在mounted中使 ...
- CSS实现table固定宽度,超过单元格部分内容省略
<table>单元格的宽度是根据内容的大小自适应的,没有内容的地方就挤到了一起.需要固定表格宽度和每一列的宽度. table-layout:fixed 在固定表格布局中,水平布局仅取决于表 ...
随机推荐
- 移动 App 接入 QQ 登录/分享 图文教程
移动 App 接入 QQ 登录/分享 图文教程 这里先要提两个平台,腾讯开放平台和 QQ 互联平台: (一)腾讯开放平台 官网地址:https://open.tencent.com/ 介绍:腾讯开放平 ...
- maven项目ssh框架的整合
1.环境 eclipse版本:Eclipse Mars2 4.5jdk版本:1.8maven版本:apache-maven 3.3.9zhnegs这是主要的开发工具版本,ssh的各种jar包版本就不列 ...
- Linux工具-nmon
1.nmon下载地址:https://sourceforge.net/projects/nmon/files/ 创建文件nmon:# mkdir nmon 解压文件夹:# tar -zxvf nmon ...
- Python学习---深入编码学习1225
1.1. Python2 Py2中只有2中数据类型,Str和Unicode,而且str中保存的是bytes,Unicode中保存的是unicode 一切我们能看到的明文都是unicode数据类型, b ...
- jquery-validation验证插件
参考网站:菜鸟教程 一.导入js <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/j ...
- (六)Linux下的压缩命令
======================================================================================== .zip格式的压缩和解 ...
- RedisClient的安装及基本使用
管理redis的可视化客户端目前较流行的有三个:Redis Client ; Redis Desktop Manager ; Redis Studio. 这里目前给大家介绍Redis Client 的 ...
- 【[SHOI2007]园丁的烦恼】
\(CDQ\) 分治的神奇操作 这个问题跟偏序问题好像差的不小啊 但是就是可以转化过去 对于一个查询我们可以把它拆成四个,也就是用二维前缀和的方式来查询 我们发现其实前缀和的定义就是多少个点的横纵坐标 ...
- Odoo中的onchange
转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9280723.html [onchange=前端js函数,可以实现前端实时更新以及修改验证] onchange ...
- 【ES6】最常用的es6特性(一)
参考链接: http://www.jianshu.com/p/ebfeb687eb70 http://www.cnblogs.com/Wayou/p/es6_new_features.html 1.l ...