JS:jquery插件表格单元格合并.
公司需要用到单元格合并,于是动手封装了一个简单的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
JS:jquery插件表格单元格合并.的更多相关文章
- 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示
1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...
- SNF快速开发平台MVC-表格单元格合并组件
1. 表格单元格合并组件 1.1. 效果展示 1.1.1. 页面展现表格合并单元格 图 4.1 1.1.2. 导出excel合并单元格 图 4.2 1.2. 调用说 ...
- JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...
- PHPWord中文乱码、单元格合并、动态表格模板解决方案合集
摘要: 最近一个项目开发要用到PHP技术导出Word文档,采用PHPWord插件,版本为0.6.2 beta,CodePlex已停止维护.网上还有另外一个版本的PhpWord,项目类名大小写上略有不 ...
- Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等
目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- Bootstrap:Bootstrap_table第一篇:快速用bootstrap_table(支持参数)筛选并展示数据,固定表格前几列,实现表格单元格编辑
1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...
- NPOI 教程 - 2.1单元格合并
来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...
- 关于.net Microsoft.Office.Interop.Word组建操作word的问题,如何控制word表格单元格内部段落的样式。
控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...
随机推荐
- linux Ubuntu14.04 python(c++版本) tesorflow(python版本)c++
一.环境变量配置: export M2_HOME=/home/ustcjing/Maven/apache-maven- export JAVA_HOME=/usr/lib/jvm8/java expo ...
- PIE SDK地图书签
地图书签,可以理解为暂时记录当前地图的范围和放大级别,在后续的操作中如果想回到地图之前的状态,就可以点击保存的书签就可以回到此状态,如图所示: 地图刚加载的时候是一幅世界地图 我们将地图的中心拖到南美 ...
- 《阿里如何实现秒级百万TPS?搜索离线大数据平台大数据平台架构解读》读后感
在使用淘宝时发现搜索框很神奇,它可以将将我们想要的商品全部查询出来,但是我们并感觉不到数据库查询的过程,速度很快.通过阅读这篇文章让我知道了搜索框背后包含着很多技术,对我以后的学习可能很有借鉴. 平时 ...
- rancher初级(搭建+基本操作+web应用部署)
Rancher搭建 首先rancher需要安装了docker的linux环境,我的系统版本为 在docker的基础上启动rancher服务器,Rancher 服务器是一个 Docker image,所 ...
- vi和vim的基本介绍
所有的 Linux 系统都会内建 vi 文本编辑器. Vim 具有程序编辑的能力,可以看做是Vi的增强版本,可以主动的以字体颜色辨别语法的正确性,方便程序设计.代码补完.编译及错误跳转等方便编程的 ...
- Developing crm service based on apache cxf
1 数据库环境搭建 创建数据库boscrm 执行脚本: 脚本内容: /* Navicat MySQL Data Transfer Source Server : root Source Server ...
- 关于eclipse添加自动查找文件以及svn的插件
1.添加自动查找当前文件位置的插件(如下图) 在百度搜索下载 OpenExplorer_1.5.0.v201108051313.jar,下载之后放入eclipse下面的plugin文件夹下面既可以 2 ...
- params传递任意参数
namespace 传递任意参数{ class Program { static void Main(string[] args) { //可传递任意数量参数 Test(1, 2, "sas ...
- mongodb慢查询记录
在 MySQL中,慢查询日志是经常作为我们优化数据库的依据,那在MongoDB中是否有类似的功能呢?答案是肯定的,那就是Mongo Database Profiler.不仅有,而且还有一些比MySQL ...
- mysql中字段类型是datetime时比较大小问题
select sum(studychj) as tofflinejz from afterline where studybegin >= '2010-01-01 00:00:00' and s ...