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
原始数据
按行查看
历史
html 单元格拆分及合并,表格合并和拆分.html相关推荐
- html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
- php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码,ONE
已经生成的数据表格大致 - phpStudy...
基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 ...
- phpexcel合并单元格导出_PHPExcel如何实现合并与拆分单元格
PHPExcel如何实现合并与拆分单元格?本文主要介绍了PHPExcel合并与拆分单元格的方法,涉及PHPExcel中setCellValue与mergeCells方法的使用技巧,需要的朋友可以参考下 ...
- 关于JAVA POI解析WPS docx文档中的table(复杂表格包含单元格横向,纵向的合并)
关于JAVA POI解析WPS docx文档中的table(复杂表格包含单元格横向,纵向的合并) 首先,关于poi解析表格先阅读一篇他人的博客 使用poi读取word2007(.docx)中的复杂表格 ...
- html两个th合并单元格,10、HTML表格(table 、th、tr、td、合并单元格)的简单认识...
1.表格的定义 表格的定义是通过 table 标签来定义的,当然了,如果只是写一个 table 标签,是看不见任何内容的,一个表格是由行和列组成,而在HTML中,行的定义又是由 tr 标签来定义的,列 ...
- html表格里面怎么合并单元格的快捷键,合并单元格快捷键:Excel怎么合并单元格...
今天来聊聊一篇关于合并单元格快捷键:Excel怎么合并单元格的文章,现在就为大家来简单介绍下合并单元格快捷键:Excel怎么合并单元格,希望对各位小伙伴们有所帮助. 方法如下: 1.首先我们需要将&q ...
- table合并单元格_制作课程表3——合并单元格
由于浏览器兼容问题,. 以及 很少被使用, 所以我们将课程表依然使用tr.td元素,结合样式实现出前面案例中效果 原来代码: 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课 ...
- html统计表合并单元格的快捷键,excel中合并单元格的快捷键的方法及设置技巧
快捷键的熟练使用可以帮助我们在工作中提高效率,接下来为您讲解合并单元格的快捷键设置方法的图文演示 合并单元格在excel默认的情况下是没有快捷键的. 需要用以下方法设置 1.打开excel,选择工具- ...
- html合并单元格怎么把字竖着,电脑excel单元格中文字如何在合并单元格后竖排显示...
电脑excel单元格中文字如何在合并单元格后竖排显示 excel软件是我们现在经常使用的数据处理工具之一,接下来小编就教大家怎样在软件中设置合并单元格之后竖排显示文字. 具体如下: 1. 首先我们需要 ...
- html 合并单元格后居中,excel批量合并单元居中,还在手工点合并后居中吗
很多朋友对于列中相同的内容,都会手工点击菜单栏上的合并后居中,这样手工操作的方式,对数据量不是很大的列,操作没有任何问题,但对于列中数据比较多的情况,如果还是先选中相同的内容,然后再进行合并后居中,这 ...
最新文章
- 入门科普,围绕JVM的各种外挂技术
- 怎么使用 JavaScript 将网站后台(后端)的数据变化(图片)实时更新到前端?
- 进程隐藏工具hidetoolz源码_linux最好用的资源监控工具-glances
- Linux监控命令之==top
- python3 开发面试题(collections中的Counter)6.7
- Zabbix Maintenance 维护周期
- AIsing Programming Contest 2020 总结
- C#编程(八十一)---------- 捕获异常
- Spring集成Quartz定时任务 ---- 定时执行
- 我打败了妈妈 - 张朔
- 【干货】2021新消费品牌STEP增长方法论:品牌营销与生意增长Playbook.pdf(附下载链接)...
- 机器学习7/100天-K近邻算法
- 上线两个月冲上 App Store 免费榜 Top 2,腾讯会议有什么独到之处?
- 台式电脑开机显示节电模式怎么办_台式电脑的开机密码忘记了怎么办?
- ubuntu 开启ssh
- 磨洋工 warm-chair attrition
- 怎么让热图显示基因名_教你画一个掰弯的热图(Heatmap),展示更多的基因表达量...
- 引用作为函数的返回值
- 2022-2028全球与中国工业机械电动执行器市场现状及未来发展趋势
- 西游记笔记与想法(3)
热门文章
- Linux内核安装后reboot选择,Linux内核配置选项 参考(3)
- 基于Html+Css+javascript的动漫网站
- vue纯前端增删改查分页
- 【单片机毕业设计】【mcuclub-jj-050】基于单片机的门禁的设计
- ACM常用英文术语翻译
- gitlab+drone+harbor之CI自动化流程
- 大华流媒体服务器型号列表,大华DAHUA网络视频存储服务器DH-EVS5016S详细信息_产品参数_价格_联系方式_DAV数字音视工程网...
- ClamWin杀毒程序的改写
- viper4android io错误,viper操作文档
- windows达梦数据库卸载不完全,重新装达梦数据库现有服务失败/该实例名已被其他实例占用