拆分與合并

table {

margin: 50px auto 10px;

}

td {

width: 100px;

height: 100px;

text-align: center;

}

td.active{

background: #ff0;

}

#btnBox{

text-align: center;

}

#btnBox button{

width: 100px;

height: 40px;

}

#notice{

width: 600px;

margin: 20px auto;

}

1	2	3	4
1	2	3	4

合并

拆分

選擇兩個以上單元格，點擊合并按鈕，可以所選單元格及中間包含的部分合并；

選擇合并過的單元格，單機拆分按鈕，可以恢復成合并前的樣子。

/*給所有單元格添加行和列的編號*/

$("tr").each(function(k,v){

$(this).find("td").each(function(index,ele){

$(this).attr({

"data-row":k,

"data-col":index

});

});

});

/*點擊單元格，添加"active"class名*/

$("table").on("click","td",function(){

$(this).toggleClass("active");

});

/*單元格合并事件*/

$("#merge").on("click",function(){

var coordinatesList=[];//單元格坐標列表

var isRule=true;//默認選擇的是規則的

$("td.active").each(function(){

var thisRowspan=$(this).prop("rowspan")*1;//要拆分的單元格的合并屬性rowspan的值

var thisColspan=$(this).prop("colspan")*1;

var thisRow=$(this).attr("data-row")*1;//行編號

var thisCol=$(this).attr("data-col")*1;

if(thisRowspan==1&&thisColspan==1){

/*未合并的單元格*/

var coordinate={

row:thisRow,

col:thisCol

};

coordinatesList.push(coordinate);

}else{

/*合并后的單元格，進行拆分*/

for(var i=thisRow;i

for(var j=thisCol;j

var coordinate={

row:i,

col:j

};

coordinatesList.push(coordinate);

}

}

}

});

var maxRow=coordinatesList[0].row;//所選行編號的最大值

var minRow=coordinatesList[0].row;//最小值

var maxCol=coordinatesList[0].col;//列編號最大值

var minCol=coordinatesList[0].col;//最小值

/*比較出最大值和最小值*/

$.each(coordinatesList,function(){

if(this.row>maxRow){

maxRow=this.row;

};

if(this.row

minRow=this.row;

};

if(this.col>maxCol){

maxCol=this.col;

};

if(this.col

minCol=this.col;

};

});

/*判斷是否規則*/

$("tr").each(function(){

var rowNumber=$(this).find("td").eq(0).attr("data-row")*1;

if(rowNumber>=minRow && rowNumber<=maxRow){

$(this).find("td").each(function(k,v){

if($(this).attr("data-col")*1>=minCol && $(this).attr("data-col")*1<=maxCol){

var isPass=false;//默認所有符合條件的，不一定在選中列表中找到

$("td.active").each(function(){

if($(v).attr("data-row")*1==$(this).attr("data-row")*1 && $(v).attr("data-col")*1==$(this).attr("data-col")*1){

/*行和列都相同，證明找到*/

isPass=true;

}

});

if(!isPass){

/*有一個未找打，就證明不規則*/

isRule=false;

return false;

}

};

});

}

});

if(!isRule){

alert("不規則");

return false;

};

/*找出所選區域中，行編號和列編號都是最小的那個單元格，添加合并單元格屬性*/

$("td").each(function(){

if($(this).attr("data-row")*1==minRow && $(this).attr("data-col")*1==minCol){

if(maxRow-minRow){

var currentCol=$(this).attr("data-col")*1;

$(this).prop("rowspan",maxRow-minRow+1);

$(this).css("height",(maxRow-minRow+1)*100)

};

if(maxCol-minCol){

$(this).prop("colspan",maxCol-minCol+1);

$(this).css("width",(maxCol-minCol+1)*100);

};

};

$(this).removeClass("active");

});

/*刪除合并后多余的單元格*/

$("td").each(function(){

var thisRow=$(this).attr("data-row")*1;

var thisCol=$(this).attr("data-col")*1;

if(thisRow<=maxRow && thisRow>=minRow && thisCol<=maxCol && thisCol>=minCol ){

if(thisRow!=minRow || thisCol!=minCol){

$(this).remove();

};

};

});

});

/*拆分單元格*/

$("#split").on("click",function(){

$("td.active").each(function(){

var thisRowspan=$(this).prop("rowspan")*1;//要拆分的單元格的合并屬性rowspan的值

var thisColspan=$(this).prop("colspan")*1;

var thisRow=$(this).attr("data-row")*1;//要拆分單元格的原行編號

var thisCol=$(this).attr("data-col")*1;

var addHtml='';//拆分后要添加的html結構

if(thisRowspan>1 || thisColspan>1){

/*合并屬性不為1的，執行拆分操作*/

$("tr").each(function(k,v){

var rowValue=$(this).find("td").eq(0).attr("data-row")*1;//該行表格的行編號

addHtml='';

/*一行中需要添加的部分*/

for(var i=thisCol;i

addHtml+='

?';

};

if((thisRowspan>1 && rowValue=thisRow) || rowValue==thisRow){

/*符合條件的行

* 合并的行不唯一，則選擇所有合并的行

* 合并的行唯一，則選擇唯一的一行

*/

var isFind=false;

$(this).find("td").each(function(){

if($(this).attr("data-col")*1==thisCol*1-1){

/*如果找到合并單元格的前一個元素，則把要添加的部分添加在該元素后面*/

isFind=true;

$(this).after(addHtml);

return false;

}else if($(this).attr("data-col")*1==thisCol*1+thisColspan){

/*如果找到要拆分的單元格的后一個元素，則把要添加的部分添加到該元素前面*/

isFind=true;

$(this).before(addHtml);

return false;

}

});

if(!isFind){

/*如果要拆分的單元格沒有前后元素，則直接把要添加的部分放在父元素內*/

$(v).html(addHtml);

/*針對沒有前后元素的整行合并，需替換掉該行后面合并過的空行tr*/

for(var j=thisRow*1+thisRowspan-1;j>thisRow*1;j--){

addHtml='';

for(var i=thisCol;i

addHtml+='

?';

};

$(v).after('

'+addHtml+'');

}

}

};

});

/*刪掉多余的要拆分的單元格*/

$(this).remove();

};

$(this).removeClass("active");

});

/*刪掉沒有內容的空白行*/

$("tr").each(function(){

if($(this).find("td").length<1){

$(this).remove();

};

});

});

/*$("tr").each(function(){

if(行的值介于最大值和最小值之間){

$(符合的行).each({

if(列的值介于最大最小之間){

符合條件的所有單元格

}

});

}

})*/

一鍵復制

編輯

Web IDE

原始數據

按行查看

歷史

總結

以上是生活随笔為你收集整理的html 单元格拆分及合并,表格合并和拆分.html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。