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 在固定表格布局中,水平布局仅取决于表 ...
随机推荐
- 【Android Studio使用教程1】Android Studio导入项目的几种方法
本篇教程中使用到的Android Studio版本为1.0, Eclipse ADT版本23.0.4.请尝试更新到该版本. Android Studio默认使用 Gradle 构建项目, Eclips ...
- 使用wm_concat函数导致字符串过长
场景:使用select wm_concat(xxxxx) from table 的时候 返回的字符串过长 解决方案 :使用to_clob 将字符串转成 clob类型,但是由于使用的前端框架不能解析cl ...
- SpringMVC中使用DispatcherServlet
接触Web开发的时候我们会利用Servlet来接收和转发前端页面的各种请求,我们通常会在一个页面中对应一个Servlet来处理这个页面上和用户交互的信息,通常我门遇到5个以内的页面自己来写Servle ...
- maven(12),排除冲突JAR包
JAR包冲突 <dependencies> <dependency> <groupId>org.springframework</groupId> ...
- Python 爬虫 获取标签下面的子标签
thr_msgs = soup.find_all('div',class_=re.compile('msg')) for i in thr_msgs: print(i) first = i.selec ...
- Python学习---JSONP学习180130
同源策略机制 同源:协议://IP:端口[协议,域名,端口相同] 跨域:知道对方接口,同时对方返回的数据也必须是Jsonp格式的 问题描述:Ajax跨域请求数据的时候,实际浏览器已 ...
- Python实例---三级菜单的实现[high]
# version: python3.2.5 # author: 'FTL1012' # time: 2017/12/7 09:16 menu = { '陕西': { '西安': { '未名区': [ ...
- August 13th 2017 Week 33rd Sunday
The best accessory a girl can own is confidence. 女生最好的饰品就是自信. Only when we have our own ideas and on ...
- Spring Boot 的配置文件
Profile 配置 Profile 是 Spring 用来针对不同的环境对不同的配置提供支持的,全局的 Profile 配置使用 application-{profile}.properties ( ...
- Linux Min装机--配置JDK替换OpenJDK
@Linux Min装机--配置JDK替换OpenJDK 1.将下载的JDK压缩包解压到/usr/lib/jvm wil use : 一.文件复制命令cp 命令格式:cp [-adfilp ...