JS:jquery插件表格单元格合并.
来源:互联网 发布:火车采集软件 编辑:程序博客网 时间:2024/06/07 04:54
公司需要用到单元格合并,于是动手封装了一个简单的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); returnthis.each(function(){//1.首先读取整个表格的内容..vargcolsNum=$(this).find("tr").eq(0).find("td").size();vargrowsNum=$(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 TDfor (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);
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- JS:jquery插件表格单元格合并.
- jquery.table.rowspan.js 表格自动合并单元格插件
- jquery写的一个表格合并单元格的插件
- jquery操作表格 合并单元格
- js动态合并表格单元格
- js 动态合并表格单元格
- JS生成表格,合并单元格
- table合并单元格(Jquery 插件
- jquery实现表格同名单元格合并
- 合并table相同单元格的jquery插件
- table合并单元格(Jquery 插件)
- 合并table相同单元格的jquery插件
- jquery合并单元格(表格相邻列内容相同合并)
- 表格单元格合并
- Bootstrap-表格合并单元格
- table表格--合并单元格
- 用jQuery合并表格中相同文本的相邻单元格
- 用jQuery合并表格中相同文本的相邻单元格
- 简易flash播放器
- HALCON 算子函数(五) Filter
- 产品核实、范围核实与质量控制的区别
- 进程终止
- svn配置
- JS:jquery插件表格单元格合并.
- dom4j解析xml文件
- 修改MFC窗口标题和图标
- unix 网络编程 select 讲解
- HALCON 算子函数(七) Image
- pendingintent重复问题
- socket阻塞与非阻塞,同步与异步、I/O模型
- node.js addons development Prerequisite knowledgement/node.js插件开发预备知识
- .NET框架