拆分与合并
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;
}
合并
拆分
选择两个以上单元格,点击合并按钮,可以所选单元格及中间包含的部分合并;
选择合并过的单元格,单机拆分按钮,可以恢复成合并前的样子。
/*给所有单元格添加行和列的编号*/
$("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
原始数据
按行查看
历史