html 单元格拆分及合并,表格合并和拆分.html

拆分与合并

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

原始数据

按行查看

历史