javascript动态合并纵向单元格

1.需求

合并相邻行内容相同的单元格。

2.概念

rowspan指定单元格纵向跨越的行数。如rowspan被设为3，这表示该单元格必须跨越三行（本身一行，加上另外两行）

3.公共方法

  /*** 单元格合并方法,增加rowspan属性* @param data 要处理的数据* @param nameList 合并的字段list*/
function rowspanFun(data, nameList) {for (var i = 0; i < nameList.length; i++) {var name = nameList[i];var startRow = 0;var endRow = data.length;var mergeNum = 1;if (endRow != 1) {for (var j = startRow; j < endRow; j++) {if (j == endRow - 1) { //判断是否是最后一个元素if (startRow == endRow - 1) {data[j][name + 'Rowspan'] = 1;}} else {if (data[startRow][name] == data[j + 1][name]) {data[j + 1][name + 'Rowspan'] = 0;mergeNum = mergeNum + 1;data[startRow][name + 'Rowspan'] =mergeNum;} else {startRow = j + 1;if (mergeNum > 1) {data[startRow][name + 'Rowspan'] = 1;} else {data[j][name + 'Rowspan'] = 1;}mergeNum = 1;}}}} else {data[0][name + 'Rowspan'] = 1;}}return data;}

4.js中调用公共方法

var data =  [{name: 'dwj', sex: '女', age: 20},{name: 'dwj', sex: '男', age: 20},{name: 'dwq', sex: '女', age: 20},{name: 'other', sex: '女', age: 20}];
rowspanFun(data, ['name', 'sex']);

调用方法后的数据处理结果

5.html中使用

<table><tr *ngFor="let item of data"><td *ngIf="item.nameRowspan != 0" [attr.rowspan]='item.nameRowspan'>{{item.name}}</td><td *ngIf="item.sexRowspan != 0" [attr.rowspan]='item.sexRowspan'>{{item.sex}}</td><td>{{item.age}}</td></tr></table>

注意：此html代码使用的是ng语法，请根据自已使用的js框架自行调整。

6.结果

javascript动态合并纵向单元格相关推荐

html合并纵向单元格,HTML中单元格合并
HTML中单元格合并跨行合并:rowspan, 跨列合并: colspan. 天朝 Party 河蟹房价草泥马狮子相关文档: 在Web应用程序特别是Web2.0程序开发中,经常要获取页面中 ...
EasyExcel 动态表头 + 数据单元格合并
前言本文想要达到以及最终实现的效果: 要实现这种效果,包含两个部分的操作: 1. 动态表头 EasyExcel 生成 Excel 时要使表头有合并效果,可以采用**注解和非注解(动态表头)**的方法 ...
css 纵向合并_excel只能合并横向单元格
excel怎么将横向和纵向合并在一个单元格在B2单元格输入以下公式,然后向右向下填充公式 =B$1&$A2 详见附图示例 excel在有合并单元格的表怎么只选一列? 就是表格顶部有合并单元格 ...
纵向合并gridview单元格的两种方法
比如说有这样一组数据用gridview展示出来是这样 name num a 0 a 1 a 2 a 3 a 4 b 5 b 6 b 7 b 8 b 9 b 10 但想把相同的name放在一个单元格里, ...
JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格一.需求如果存在一个表格,想把其中某一列内容相同的部分合并单元格,用J ...
python使用openpyxl excel 合并拆分单元格
再次编辑中,这次是在使用删除列的时候发现,合并单元格会出现漏删除情况,才想到用拆分单元格,没想到unmerge_cells(),worksheet.merged_cells返回的合并单元格对象居然不能 ...
python openpyxl合并单元格_python使用openpyxl excel 合并拆分单元格
再次编辑中,这次是在使用删除列的时候发现,合并单元格会出现漏删除情况,才想到用拆分单元格,没想到unmerge_cells(),worksheet.merged_cells返回的合并单元格对象居然不能 ...
bootstrap-table动态添加列、动态添加行、单元格点击横向、竖向统计
功能说明 --暂时是个demo 数据需要自行处理 1.竖向统计统计使用bootstrap-table自带的footerFormatter函数2.横向同级统计使用bootstrap-table 列属性 ...
java jtable 单元格合并_JTable 单元格合并【转】
最近,我为了做一个管理系统,需要用到合并JTable的单元格.查找了很多资料,终于简单的实现了.现在把代码共享出来,希望对大家有用. 本程序主要实现行的合并,列的合并大家可以根据下面的代码修改. CM ...

javascript动态合并纵向单元格

1.需求

2.概念

3.公共方法

4.js中调用公共方法

5.html中使用

6.结果

javascript动态合并纵向单元格相关推荐

最新文章

热门文章