JS动态生成表格后 合并单元格

最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的。用文字描述需求太费劲了,如下图所示:

1. 没有合并之前的图如下:

2. 合并之后的图如下:

如上所示:是根据相邻的编号相同 进行单元格合并。

先看看实现后的效果再聊吧!

JSfiddle链接地址如下:

点击我查看效果!

实现思路: 动态生成数据,那么需要合并的单元格先不动态生成,等数据渲染完成后,再去做如下操作:

1. 遍历所有tr标签,获取所有的编号存入数组里面去,并且对数组进行去重操作。

2. 循环去重后的新数组,再去循环tr标签,分别获取当前tr上的编号和长度属性,然后tr中的编号与循环后的新数组某项是否相等,如果相等的话,那么在当前的tr前插入td单元格且加上rowspan属性。

3. 使用break语句,跳出当前的for循环,进入新数组下一次循环,目的是:只取tr相同的项的第一项插入合并后的单元格。

HTML代码在此不贴代码,要看的话 去jsfiddle效果里面去看。

所有JS代码如下:

//去掉数组重复项
function unique(arr){
arr = arr || [];
var obj = {},
ret = [];
for(var i = 0, ilen = arr.length; i < ilen; i+=1) {
var curItem = arr[i],
curItemType = typeof(curItem) + curItem;
if(obj[curItemType] !== 1) {
ret.push(curItem);
obj[curItemType] = 1;
}
}
return ret;
}
/**
$.ajax({ });**/
// 假如返回数据如下:
var data = [{'key':[{'num1':'001','n2':'4','n3':'5'}]},
{'key':[{'num1':'002','n2':'44','n3':'55'},{'num1':'002','n2':'44','n3':'55'}]},
{'key':[{'num1':'003','n2':'444','n3':'555'},{'num1':'003','n2':'444','n3':'555'}]},
{'key':[{'num1':'004','n2':'666','n3':'666'},{'num1':'004','n2':'666','n3':'666'}]}
];
html = ""; $('#j-tbody').html('');
for(var i = 0; i < data.length; i++) { for(var j = 0; j < data[i].key.length; j++) {
html += '<tr class="j-number" data-num="'+data[i].key[j].num1+'" data-len="'+data[i].key.length+'">'+
/*'<td>'+data[i].key[j].num1+'</td>'+ */
'<td>'+data[i].key[j].n2+'</td>'+
'<td>'+data[i].key[j].n3+'</td>'+
'</tr>';
}
}
$("#j-tbody").html(html); var rets = [];
// 遍历tr 获取属性 data-num
$('.j-number').each(function(){
var num = $(this).attr('data-num');
rets.push(num);
});
var newArrs = unique(rets),
domElems = $('.j-number'); // 再次遍历新数组
for(var m = 0; m < newArrs.length; m++) {
for(var n = 0; n < domElems.length; n++) {
var elemNum = $(domElems[n]).attr('data-num'),
elemLen = $(domElems[n]).attr('data-len');
if(newArrs[m] == elemNum) {
var td = '<td rowspan="'+elemLen+'">'+elemNum+'</td>';
$(domElems[n]).prepend(td);
break;
}
}
}

JS动态生成表格后 合并单元格的更多相关文章

  1. poi生成表格自动合并单元格

    直接复制这个工具类即可使用: /** * 合并单元格 * @author tongyao * @param sheet sheet页 * @param titleColumn 标题占用行 * @par ...

  2. js 动态生成表格案例

    <1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th),   下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...

  3. js动态生成表格

    动态生成表格           *创建一个页面:两个输入框和一个按钮 *代码和步骤                      /*                          1.得到输入的行 ...

  4. layui:数据表格如何合并单元格

    layui.use('table', function () { var table = layui.table; table.render({ elem: '#applyTab' , url: '$ ...

  5. layui 动态表格之合并单元格

    需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...

  6. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

  7. JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  8. vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...

  9. vue中 表头th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...

随机推荐

  1. linux系统编程:用truncate调整文件大小

    truncate的使用非常简单: int truncate(const char *path, off_t length); 参数1:文件名 参数2:  文件需要被调整的大小 length 大于 文件 ...

  2. JQ面试问题(转载)

    1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,动画啊,表单啊,ajax事件等 配置Jquery环境 下载jquery ...

  3. Bootstrap+PHP实现多图上传

    插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...

  4. 【代码笔记】iOS-JSONKit的使用

    一,工程图. 二,代码. #import "RootViewController.h" //为JSONKit添加头文件 #import "JSONKit.h" ...

  5. 【java基础】基础小总结

    学习java,将自己的心得或总结写下来吧. Java 标识符 标识符由字母,下划线(_),美元符($)和数字组成. 标识符不能以数字开头. 标识符不能使java关键字. 标识符对大小写敏感. Java ...

  6. Python使用MySQLConnector/Python操作MySQL、MariaDB数据库

    使用MySQL Connector/Python操作MySQL.MariaDB数据库   by:授客 QQ:1033553122 因目前MySQLdb并不支持python3.x,而MySQL官方已经提 ...

  7. Android系统启动流程(四)Launcher启动过程与系统启动流程

    此前的文章我们学习了init进程.Zygote进程和SyetemServer进程的启动过程,这一篇文章我们就来学习Android系统启动流程的最后一步:Launcher的启动流程,并结合本系列的前三篇 ...

  8. [Ubuntu] 14.04 外接显示器分辨率调整

    最近按照提示更新了一下系统,安装了100多M的更新包,结果系统又读不出外接显示器的信息了,开机显示vga-1:probed a monitor but no|invalid edid,我也不懂. 后来 ...

  9. 使用Eclipse Debug的一些说明

    目录 Debug视图 线程堆栈视图 变量视图 断点视图 表达式视图 代码视图 远程Debug 异常断点 条件断点 表达式 Debug定位第三方插件的问题 Debug一些经验   Debug视图 认识d ...

  10. 在 Azure 中将基础结构自动化工具与虚拟机配合使用

    若要以一致的方式大规模创建和管理 Azure 虚拟机 (VM),通常需要某种形式的自动化. 可以通过许多工具和解决方案来自动完成整个 Azure 基础结构部署和管理生命周期. 本文介绍了一些可以在 A ...