html表格cell合并插件
数据展示时需要合并部分数据自己写了一个简单插件
合并前:

合并后:

调用示例:
var trs = $('table#dataList tbody tr').not('#demo').get();
var cellMerger = new CellMerger();
//合并大区
cellMerger.merge(trs, new Array('MSGNUMBER','LARGEAREA'), new Array('LARGEAREA'));
cellMerger.merge(trs, new Array('MSGNUMBER'), new Array('option','statusName','TITLE','MSGNUMBER','CREATEOWNER','CTIME'));
参数说明:
第一个参数是要处理合并的行, 第二个参数是合并条件, 比如列1和列2对应值相等什么的, 支持多条件, 第三个参数是要合并的列
合并插件:
function CellMerger(){
}
CellMerger.prototype.merge = function (trs, needIndexs, mergedIndexes){
var mergeds = new Array();
for(x in mergedIndexes){
mergeds.push("td[index="+mergedIndexes[x]+"]");
}
var needs = new Array();
for(x in needIndexs){
needs.push("td[index="+needIndexs[x]+"]");
}
this.mergeCell(trs, needs, mergeds);
};
CellMerger.prototype.conditionMatch = function (targets, currents){
if(targets.length==0 && currents.length==0){
return true;
}
if(targets.length != currents.length){
return false;
}
for(x in targets){
if(targets[x]!=currents[x]){
return false;
}
}
return true;
};
CellMerger.prototype.rowspanAndRemove = function (trs, curIndex, sames, mergeds){
var rowspan=sames.length+1;
for(x in mergeds){
$(trs[curIndex]).children(mergeds[x]).attr('rowspan',rowspan);
}
for(var j=0;j<sames.length;j++){
for(x in mergeds){
$(trs[sames[j]]).children(mergeds[x]).remove();
}
}
};
CellMerger.prototype.mergeCell = function (trs, needs, mergeds){
var targets = new Array();
var curIndex = 0;
var sames = new Array();
for(var i=0;i<trs.length;i++){
var current = new Array();
for(x in needs){
current[x] = $(trs[i]).children(needs[x]).html();
}
if(targets.length == 0){
//初始化比对条件
curIndex = i;
for(x in needs){
targets[x] = $(trs[i]).children(needs[x]).html();
}
}
else{
if(this.conditionMatch(targets, current)){
sames.push(i);
//最后一条进行向前合并
if(i == trs.length-1 && sames.length>0){
this.rowspanAndRemove(trs, curIndex, sames, mergeds);
}
}
else{
//合并相似项
if(sames.length>0){
this.rowspanAndRemove(trs, curIndex, sames, mergeds);
}
//清空数组, 重置比较索引
curIndex = i;
sames = new Array();
for(x in needs){
targets[x] = $(trs[i]).children(needs[x]).html();
}
}
}
}
};
html表格cell合并插件的更多相关文章
- ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
- 支持10种格式的 HTML 表格导出 jQuery 插件
HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON.XML.PNG.CSV.TXT.SQL.MS-Word.MS-Excel.MS-PowerPoint 和 PDF 格 ...
- ExtJS4.2学习(13)基于表格的扩展插件---rowEditing
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...
- CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- 适用于iview的表格转Excel插件
在网上找的一个表格转excel插件,经过修改后使其适用于iview中的table组件 let idTmr; const getExplorer = () => { let explorer = ...
- Bootstrap-table实现动态合并相同行(表格同名合并)
写在前面: 有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成 ...
- IOS tableView 去除分割线 和 不允许选中表格cell
//去除分割线 self.tableView.backgroundColor=[UIColor colorWithRed:///255.0 alpha:1.0]; self.tableView.sep ...
- jQuery 表格隔行变色插件
jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...
随机推荐
- 解决 phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接 问题
phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 问题解决办法: 修改co ...
- java中split以"."分割的问题
今天开发中使用字符串分割函数split(),发现:输出的并不是想要的结果 或者直接报错都有可能 查询后才发现,需要转译 原来在java中函数split(".")必须是是split( ...
- 初学Android:意图之intent
Intent意为:意图.简单的理解就是用来从一个Activity/Service跳转到另一个Activity/Service中,并可以携带数据,也可以在这个程序调用别的程序.这样我们虽然不懂如何结息条 ...
- HTML解析引擎:Jumony 开源项目
Jumony Core首先提供了一个近乎完美的HTML解析引擎,其解析结果无限逼近浏览器的解析结果.不论是无结束标签的元素,可选结束标签的元素,或是标记属性,或是CSS选择器和样式,一切合法的,不合法 ...
- EqualsBuilder和HashCodeBuilder(重写equal和hashcode)
EqualsBuilder和HashCodeBuilder 自动化hashCode()和equals() 问题产生:当需要自动实现hashCode()和equals()方法 解决方法:使用Equa ...
- Masonry约束崩溃
报错: Trapped uncaught exception 'NSInvalidArgumentException', reason: '*** +[NSLayoutConstraint const ...
- 使用ibatis时 sql中 in 的参数赋值
一.问题描述: 1.在使用ibatis执行下面的sql: update jc_jiesuan set doing_time = unix_timestamp(curdate()),doing_stat ...
- POJ 2711 Regular Words(DP + 高精度)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1711 题目大意:给定一个正整数n,产生一个3*n位长的串,要求这个串 ...
- iframe框根据内容自适应高度
1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...
- ES6 语法简介
参考: http://es6.ruanyifeng.com/ 总结学习 JavaScript语言下一代标准,2015年6月正式发布. 1.let和const命令 let用作变量声明,只在代码块内有效 ...