公司需要用到单元格合并,于是动手封装了一个简单的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插件表格单元格合并.的更多相关文章

  1. 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示

    1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...

  2. SNF快速开发平台MVC-表格单元格合并组件

    1.   表格单元格合并组件 1.1.      效果展示 1.1.1.    页面展现表格合并单元格 图 4.1 1.1.2.    导出excel合并单元格 图 4.2 1.2.      调用说 ...

  3. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

  4. PHPWord中文乱码、单元格合并、动态表格模板解决方案合集

    摘要:  最近一个项目开发要用到PHP技术导出Word文档,采用PHPWord插件,版本为0.6.2 beta,CodePlex已停止维护.网上还有另外一个版本的PhpWord,项目类名大小写上略有不 ...

  5. Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

    目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 ...

  6. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  7. Bootstrap:Bootstrap_table第一篇:快速用bootstrap_table(支持参数)筛选并展示数据,固定表格前几列,实现表格单元格编辑

    1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...

  8. NPOI 教程 - 2.1单元格合并

    来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...

  9. 关于.net Microsoft.Office.Interop.Word组建操作word的问题,如何控制word表格单元格内部段落的样式。

    控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...

随机推荐

  1. python 文件处理(基础字符)

    基于字符read & write 最基本的文件操作当然就是在文件中读写数据.这也是很容易掌握的.现在打开一个文件以进行写操作: 1. fileHandle = open ( 'test.txt ...

  2. MongoDB数据库进阶 --- 增删查改...

    注意: monogdb数据在使用之后必须及时 mongodb.close()否则后台崩溃. 在之前的文章中,我已经介绍了什么事MongoDB以及怎么在windows下安装MongoDB等等基本知识. ...

  3. 个人笔记——Android网络技术

    一.WebView 的用法 Android 提供WebView 的用法,可以在自己的应用程序里嵌入一个浏览器 webView.getSettings().setJavaScriptEnabled(tr ...

  4. Java Swing笔记

    想到了解一下GUI主要是想用来做点小工具,记录一些笔记. 文本框自动换行和滚动条 private static JTextArea addJTextArea(JPanel panel, int x, ...

  5. [转]实例化SqlParameter时,如果是字符型,一定要指定size属性

    转自:http://bbs.csdn.net/topics/380155255 以前在实例化SqlParameter时,通常都是用下面的语句,没有设置size属性: new SqlParameter( ...

  6. JSON转C#实体类

    https://www.bejson.com/convert/json2csharp/

  7. Myeclipse编辑JSP文件时,可以点击重口顶部的箭头来切换全屏状态

  8. small zhishi

    \\192.168.1.201\d$\Data 访问远程计算机文件资源管理器

  9. 解决npm install安装慢的问题

    国外镜像会很慢 可用 get命令查看registry npm congfig get registry 原版结果为 http://registry.npmjs.org 用set命令换成阿里的镜像就可以 ...

  10. Mysql只Union用法

    MYSQL中的UNION UNION在进行表链接后会筛选掉重复的记录,所以在表链接后会对所产生的结果集进行排序运算,删除重复的记录再返回结果. 举例说明: select * from table1 u ...