公司需要用到单元格合并,于是动手封装了一个简单的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. hdu1286 找新朋友 欧拉函数模板

    首先这一题用的是欧拉函数!!函数!!不是什么欧拉公式!! 欧拉函数求的就是题目要求的数. 关于欧拉函数的模板网上百度一下到处都是,原理也容易找,这里要介绍一下另一个强势模板. 在这一题的讨论里看到的. ...

  2. openstack、kvm、qemu-kvm、libvirt、xen的关系

    虚拟化技术—基础(1) 本文围绕下面3个问题进行对虚拟化技术展开讨论: 1.虚拟化技术实现方式有哪些?虚拟化技术分哪些? 2.请分别通过kvm.xen工具来实现虚拟化系统的部署? 3.请描述opens ...

  3. 论文阅读 | STDN: Scale-Transferrable Object Detection

    论文地址:http://openaccess.thecvf.com/content_cvpr_2018/papers/Zhou_Scale-Transferrable_Object_Detection ...

  4. Spark (Python版) 零基础学习笔记(一)—— 快速入门

    由于Scala才刚刚开始学习,还是对python更为熟悉,因此在这记录一下自己的学习过程,主要内容来自于spark的官方帮助文档,这一节的地址为: http://spark.apache.org/do ...

  5. storm(2)-机制

     1.storm vs esper 2.storm vs spark streaming storm处理的是每次传入的一个事件:spark streaming 处理的是某个时间段窗口内的事件流. 因此 ...

  6. SpringBoot---开发的热部署

    1.模板的热部署 在SpringBoot中,模板引擎的页面默认是开启缓存的: 如果修改了页面的内容,则刷新不到修改后的页面: 可以在application.properties中关闭模板引擎的缓存: ...

  7. oracle 基础知识(五)--回滚(commit和rollback)

    一,commit 01,commit干了啥 commit 就是提交的意思.也就是当你把99%的东西都做好了,然后你执行最后一步的操作...再commit前的话你可能啪啪啪啪啪,敲了几百条sql DML ...

  8. 4~20mA转0~5V

    RCV420是一种精密的I/V转换电路,也是目前最佳的4-20mA转换0-5V的电路方案,有商用级(0℃-70℃)和工业级(-25℃-+85℃)供你选购 301欧姆为精度1%. RCV420运行40m ...

  9. IDEA 导入cordova3.5工程目录注意事项

    IDEA 导入cordova3.5工程目录注意事项 1 eclipse很不稳定,有很多小问题.平时我自己用idea,但是当用cordova3.5创建好工程目录是,用eclipse导入时没有问题的.但是 ...

  10. 深入redis内部之redis启动过程之二

    接上文,继续分析代码 1. 设置线程安全模式 zmalloc_enable_thread_safeness();/*设置线程安全标识符为1*/ void zmalloc_enable_thread_s ...