公司需要用到單元格合並,於是動手封裝了一個簡單的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);