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>