JS:jquery插件表格单元格合并.
公司需要用到单元格合并,于是动手封装了一个简单的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);