公司需要用到单元格合并,于是动手封装了一个简单的jquery插件,封装的函数是直接写好转的,请多多提意见看代码是否有优化的地方.....

截图:

代码:

/*
* mergeTable 0.1
* Copyright (c) 2013 eastday http://eastday.cnblogs.com/
* Date: 2013-07-19
* 使用mergetTable可以方便地将表格进行合并。
* 参数说明:rowsToMerger 跨行合并列 cols:需要合并的列索引,从0开始,rows:[起始行-结束行],val:填充值
colsToMerger 同行合并列 rows:需要合并的行索引,从0开始,cols:[起始列-结束列],val:填充值
*/
(function($){
$.fn.mergeTable = function(options){
var defaults = {
rowsToMerger:[{cols:0,rows:[1,2],val:"rowsToMerger"}],
colsToMerger:[{rows:0,cols:[1,2],val:"colsToMerger"}]
}
var options = $.extend(defaults, options);
return this.each(function(){
//1.首先读取整个表格的内容..
var gcolsNum=$(this).find("tr").eq(0).find("td").size();
var growsNum=$(this).find("tr").size(); //2.跨行合并列
var rowsToMerger= options.rowsToMerger;
//3.同行合并列
var colsToMerger= options.colsToMerger; for(var j=0;j<rowsToMerger.length;j++)
{
setRowspan($(this),rowsToMerger[j].cols,rowsToMerger[j].rows,rowsToMerger[j].val);
} for(var j=0;j<colsToMerger.length;j++)
{
setColspan($(this),colsToMerger[j].cols,colsToMerger[j].rows,colsToMerger[j].val)
}
//同行合并列
function setColspan(obj,cols,rows,val)
{
var colstar=cols[0];
var colsend=cols[1];
var objtr=$(obj).find("tr").eq(rows);
var curColsNum=objtr.find("td").size(); var objtd;
//如果没有合并过列
if (gcolsNum==curColsNum){
objtd= objtr.find("td").eq(colstar).attr("colspan",colsend-colstar +1 );
//SET VALUE
if(val!="") {
objtr.find("td").eq(colstar).html(val);
}
}else {
//合并过列以后,列需要重新计算
var colsdif=gcolsNum-curColsNum;
objtd= objtr.find("td").eq(colstar-colsdif).attr("colspan",colsend-colstar +1 );
//SET VALUE
objtr.find("td").eq(colstar-colsdif).html(val);
} //移除合并以前的列
for(var i=colstar+1;i<colsend+1;i++ )
{
var colsDif= colsend - colstar;
if(gcolsNum==curColsNum){
objtr.find("td").eq(colstar+1).remove();
}else {
objtd.next().remove();
}
}
}
//跨行合并列
function setRowspan(obj,cols,rows,val)
{
//SET VARIABLE
var rowstar=rows[0];
var rowsend=rows[1];
var objtr=$(obj).find("tr"); var rowStarColsNum=parseInt(objtr.eq(rowstar).find("td").size()); //SET ROWSPAN
if(rowStarColsNum==parseInt(gcolsNum)) { objtr.eq(rowstar).find("td").eq(cols).attr("rowspan",rowsend-rowstar +1 );
//SET VALUE
if(val!="") {
objtr.eq(rowstar).find("td").eq(cols).html(val);
} } else{
//相差的列数
var colsDif= gcolsNum - rowStarColsNum;
objtr.eq(rowstar).find("td").eq(cols-colsDif).attr("rowspan",rowsend-rowstar +1 );
if(val!="") {
objtr.eq(rowstar).find("td").eq(cols-colsDif).html(val);
}
}
//RMOVE TD
for (var i=rowstar+1;i<rowsend+1;i++){ var curCols=parseInt(objtr.eq(i).find("td").size()); if (curCols==parseInt(gcolsNum))
{
objtr.eq(i).find("td").eq(cols).remove(); }else{
//相差的列数
var colsDif= gcolsNum - curCols;
objtr.eq(i).find("td").eq(cols-colsDif ).remove();
}
}
}
});
};
})(jQuery);

DEMO下载:http://files.cnblogs.com/files/eastday/demo.rar

最新文章

  1. 如何破解mac版UltraEdit?
  2. Java与C++面向对象不同点
  3. Hash哈希类型
  4. linux 的开机启动脚本顺序
  5. 【Linux】linux经常使用基本命令
  6. 注册UBER(优步)司机常见问题,如何注册uber(优步)司机
  7. 设计模式(三)装饰者模式Decorator
  8. OpenVPN的那些坑
  9. Subversion ----&gt; svnserve.conf / authz / passwd / hooks-env.tmpl &lt;&lt;翻译笔记&gt;&gt;
  10. Orange——开源机器学习交互式数据分析工具
  11. 转《canvas实现滤镜效果》
  12. c# Bitmap byte[] Stream 文件相互转换
  13. Window环境下,PHP调用Python脚本
  14. The 2018 ACM-ICPC Asia Qingdao Regional Contest, Online -C:Halting Problem(模拟)
  15. 用户管理系统之class
  16. LPCScrypt, DFUSec : USB FLASH download, programming, and security tool, LPC-Link 2 Configuration tool, Firmware Programming
  17. 每日英语:Welcome to the Global Middle-Class Surge
  18. 5 -- Hibernate的基本用法 --4 6 Hibernate事务属性
  19. Solr常用操作命令
  20. Optional类

热门文章

  1. web app与app的区别,即html5与app的区别
  2. C#知识点提要
  3. CentOS 6.7 安装配置 nagios-server
  4. TT8509: PL/SQL execution terminated; PLSQL_TIMEOUT exceeded
  5. 数据段描述符和代码段描述符(二)——《x86汇编语言:从实模式到保护模式》读书笔记11
  6. ElasticSearch:集群(Cluster),节点(Node),分片(Shard),Indices(索引),replicas(备份)之间关系
  7. 九度oj题目1385:重建二叉树
  8. Find command usage in Linux with excellent examples--reference
  9. 接收时间戳model [JsonConverter(typeof(UnixDateTimeConverter))]
  10. VS 正则表达式替换内容