公司需要用到单元格合并,于是动手封装了一个简单的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. PIE SDK傅里叶变换

    1.算法功能简介 傅里叶变换能把遥感图像从空域变换到只包含不同频域信息的频域中.原图像上的灰度突变部位(如物体边缘).图像结构复杂的区域.图像细节及干扰噪声等,经傅里叶变换后,其信息大多集中在高频区: ...

  2. 如何写一个简单的webserver(一):最简实现

    本文主要讲述如何用C/C++在Linux环境下写一个简单的支持并发的web服务器,并不考虑服务器的健壮性.安全性.性能等一系列因素. 在本文中,该服务器仅支持GET请求. 项目地址:https://g ...

  3. oracle 错误实例分析(ORA-01126)

    问题描述 SQL> shutdown immediate ORA-01109: database not open Database dismounted. ORACLE instance sh ...

  4. Java中多线程并发体系知识点汇总

    一.多线程 1.操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己的独立地址空间,包含程序内容和数据:不同进程的地址空间是互相隔离的:进程拥有各种 ...

  5. 内置组件 && vue中强大的缓存机制之keep-alive

    vue中强大的缓存机制之keep-alive 最近在用vue做项目,在切换页面时发现切换回原来的页面无法保存原来的状态. 如A页面需要ajax请求数据,然后切换到B页面做某些事情,再切换回A页面时,A ...

  6. 如何将项目部署到远程的Linux机器上的tomcat上

    下面来练习一下如何将本地的一个项目部署到远程的Linux机器上去. 第一步:将要部署到Linux机器上的项目打成一个war包 war包有一个好处tomcat可以自动解压 第二步:将打好的war上传到L ...

  7. linux_api之高级IO

    本篇索引: 1.引言 2.非阻塞IO 3.记录锁(文件锁) 4.io多路复用(I/O multiplexing ) 5.异步IO 6.存储映射IO 1.引言 我们第三篇学习了对IO的open.read ...

  8. 数据段描述符和代码段描述符(二)——《x86汇编语言:从实模式到保护模式》读书笔记11

    这篇博文,我们编写一个C语言的小程序,来解析数据段或者代码段描述符的各个字段.这样我们阅读原书的代码就会方便一点,只要运行这个小程序,就可以明白程序中定义的数据段或者代码段的描述符了. 这段代码,我用 ...

  9. 2018湖湘杯web、misc记录

    1.题目名 Code Check 打开题目,右键发现有id参数的url,简单base64解码以后发现不是明文,说明利用了其他的加密方式,那么应该会有具体的加密方式给我们,于是试试常见的文件泄露,可以发 ...

  10. SpringSecurity 3.2入门(8)自定义权限控制数据库设计

    ; -- ---------------------------- -- Table structure for t_system_authority_info -- ---------------- ...