js实现单元格合并和取消合并操作

demo：点击在线演示该页面

脚本：

<!DOCTYPE html>
<html><HEAD><TITLE>0004单元格合并和取消合并</TITLE><script src="/static/jquery/jquery-3.3.1.min.js"></script><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">
table,table tr th, table tr td { border:1px solid #0094ff;}
table { width: 750px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
td{
user-select:none;
}</style><SCRIPT LANGUAGE="JavaScript">var mouseDownFlag = false;var startTd,endTd,obj={};$(function(){var tdsPos = updatePos();$("#tableId").on('mousedown','td', function(){mouseDownFlag = true;startTd = this;});$("#tableId").on('mouseup','td', function(){mouseDownFlag = false;endTd = this;obj = selectTd(tdsPos,startTd,endTd);fillBackColor(obj);});$("#tableId").on('mouseenter','td', function(){if(mouseDownFlag){endTd = this;obj = selectTd(tdsPos,startTd,endTd);fillBackColor(obj);}});$("#hb").click(function(){var containTds = obj.containTds;if(containTds && containTds.length > 1){for(var i=0;i<containTds.length;i++){var td = containTds[i];var hbTd = $(td.ele);if(td.pos.x == obj.area.xMin && td.pos.y == obj.area.yMin){hbTd.attr("rowSpan", obj.area.yMax - obj.area.yMin + 1);hbTd.attr("colSpan", obj.area.xMax - obj.area.xMin + 1);}else{hbTd.remove();}}updatePos();}else{alert("至少选取2个单元格才能进行合并！");}});$("#qxhb").click(function(){var containTds = obj.containTds;if(containTds && containTds.length == 1 && !(obj.area.xMin == obj.area.xMax && obj.area.yMin == obj.area.yMax) ){var td = containTds[0];var hbTd = $(td.ele);hbTd.attr("rowSpan", 1);hbTd.attr("colSpan", 1);for(var i=obj.area.yMin;i<=obj.area.yMax;i++){var tempTds = tdsPos[i];var lastTd = null;var tr = obj.trParent.children().eq(i);for(var k=0;k<tempTds.length;k++){var curTd = tempTds[k];if(i == obj.area.yMin){lastTd = hbTd;}else if(curTd.pos.x >= obj.area.xMin){if(k>0){lastTd = $(tempTds[k-1].ele);}else{lastTd = null;}break;}}for(var j=obj.area.xMin;j<=obj.area.xMax;j++){if( !(i==obj.area.yMin && j==obj.area.xMin) ){if(lastTd == null){tr.prepend($("<td></td>"));}else{lastTd.after($("<td></td>"));}}}}updatePos();}else{alert("选取1个合并的单元格才能取消合并！");}});//填充背景颜色function fillBackColor(obj){$("td").css("background-color","");var containTds = obj.containTds;for(var i=0;i<containTds.length ;i++){$(containTds[i].ele).css("background-color","red");}}//根据开始和结束单元格，获取选中的单元格function selectTd(tdsPos, startTd,endTd){var obj = {startTd:startTd,endTd:endTd};obj.trParent = $(startTd).parent().parent();obj.startRowIdx = $(startTd).parent().prevAll().length;obj.startColIdx = $(startTd).prevAll().length;obj.endRowIdx = $(endTd).parent().prevAll().length;obj.endColIdx = $(endTd).prevAll().length;var containTds = [tdsPos[obj.startRowIdx][obj.startColIdx]];if( !(obj.startRowIdx == obj.endRowIdx && obj.startColIdx == obj.endColIdx) ){containTds.push(tdsPos[obj.endRowIdx][obj.endColIdx]);}obj.area = getMinArea(tdsPos,containTds);obj.containTds = containTds;return obj;}//根据包含的tds，获取最小区域坐标function getAreaByTds(tdsPos,containTds){var area = {xMin:99999,yMin:99999,xMax:-1,yMax:-1};for(var i=0;i<containTds.length;i++){var xMin = Number(containTds[i].pos.x);var yMin = Number(containTds[i].pos.y);var xMax = Number(containTds[i].pos.x + containTds[i].colspan - 1);var yMax = Number(containTds[i].pos.y + containTds[i].rowspan - 1);area.xMin = Math.min(area.xMin,xMin);area.yMin = Math.min(area.yMin,yMin);area.xMax = Math.max(area.xMax,xMax);area.yMax = Math.max(area.yMax,yMax);}return area;}//根据包含的单元格确定最小区域function getMinArea(tdsPos,containTds){var newTds = [];var targetArea = getAreaByTds(tdsPos,containTds);for(var i=0;i<tdsPos.length;i++){var tds = tdsPos[i];for(var j=0;j<tds.length;j++){var td = tds[j];var f = function(item){return item.pos.x == td.pos.x && item.pos.y == td.pos.y;};//只检查containTds还未包含的if(!containTds.find(f)){var tdArea = {};tdArea.xMin = td.pos.x;tdArea.yMin = td.pos.y;tdArea.xMax = td.pos.x + td.colspan - 1;tdArea.yMax = td.pos.y + td.rowspan - 1;var relation = getRelation(tdArea, targetArea);if(relation != "不相交"){newTds.push(td);}}}}if(newTds.length == 0){return targetArea;}for(var i=0;i<newTds.length;i++){containTds.push(newTds[i]);}return getMinArea(tdsPos,containTds);}//获取单元格与指定区域内的关系，1.targetArea完全包含tdArea，2. targetArea与tdArea 部分重合 3. targetArea与tdArea不相交function getRelation(tdArea, targetArea){//矩形各由两点(左上/右下)决定，使用屏幕坐标系//矩形   A (x1,y1),(x2,y2);var x1 = tdArea.xMin;var y1 = tdArea.yMin;var x2 = tdArea.xMax;var y2 = tdArea.yMax;//矩形   B   (x3,y3),(x4,y4);var x3 = targetArea.xMin;var y3 = targetArea.yMin;var x4 = targetArea.xMax;var y4 = targetArea.yMax;var m= (x1 > x4)|(x2 < x3);var n= (y2 < y3)|(y1 > y4);if(m|n){//不相交return "不相交";}else{//相交if(x3<=x1 && y3<=y1 && x4>=x2 && y4 >= y2){//targetArea完全包含tdAreareturn "包含";}else{//targetArea与tdArea 部分重合return "部分重合";}}return "未定义关系";}/**获取单元格修正后的坐标位置 */function getRealPos(trParent) {var tdsPos = [];var trs = trParent.children();for(var i=0;i<trs.length;i++){var tr = trs.eq(i);var tds = tr.children();tdsPos[i] = [];for(var j=0;j<tds.length;j++){var td = tds.eq(j);var rowSpan = td.attr("rowSpan") ? Number(td.attr("rowSpan")) : 1;var colSpan = td.attr("colSpan") ? Number(td.attr("colSpan")) : 1;tdsPos[i][j] = {title:td.html(), rowspan:rowSpan,colspan:colSpan,ele:td  };}}//逐个单元格坐标修复。修复顺序为从上到下，从左到右。即ABCDEFG。。。的顺序修复。tdsPos.forEach(function (rowCols, y) {rowCols.forEach(function (col, x) {col.pos = getTdRealPos(tdsPos, y, x);});});return tdsPos;}/**获取单元格rowIdx,colIdx真实的x坐标位置 */function getTdRealPos(tdsPos, rowIdx, colIdx) {var colspanNum = 0;var curTdPos = tdsPos[rowIdx][colIdx];var flagNum = 0;if(colIdx != 0){var preTdPos = tdsPos[rowIdx][colIdx-1];flagNum = preTdPos.pos.x + preTdPos.colspan - 1 ;}for(var i=rowIdx;i>=0;i--){var rowCols = tdsPos[i];for(var j=0;j<rowCols.length;j++){var col = rowCols[j];if(i == rowIdx && j < colIdx){//同一行单元格对后面单元格x坐标影响colspanNum += col.colspan;}else if(i < rowIdx && col.rowspan + i - 1 >= rowIdx){if(col.pos.x + col.colspan - 1 <= flagNum || colspanNum == col.pos.x){//上面单元格rowspan对x坐标的影响colspanNum += col.colspan;}}}}/*if(colspanNum > 0){console.log("单元格" + curTdPos.title + "向右偏移" + colspanNum);}*/return {x:colspanNum , y:rowIdx};}function updatePos(){tdsPos = getRealPos($("#tableId").children().eq(0));startTd = null;endTd = null;obj.containTds = null;var t2 = $("#tableId").clone();t2.attr("id","tableId2");$("#xzh").html("");$("#xzh").append(t2);printTablePos(t2, tdsPos);return tdsPos;}//打印单元格坐标function printTablePos(table, tdsPos){var trParent = $(table).children().eq(0);var trs = trParent.children();for(var i=0;i<trs.length;i++){var tr = trs.eq(i);var tds = tr.children();for(var j=0;j<tds.length;j++){var td = tds.eq(j);//坐标打印var pos = tdsPos[i][j].pos;td.html(tdsPos[i][j].title + " ( "+pos.x + " , "+pos.y + " )");}}}
});</SCRIPT></HEAD>
<body>
<a href="index.html">返回</a>
<h1>0004单元格合并和取消合并</h1>
<table id="tableId"><tr><td colspan="3">A</td><td rowspan="3">B</td><td rowspan="2" colspan="2">C</td><td>D</td></tr><tr><td colspan="2">E</td><td rowspan="2">F</td><td>G</td></tr><tr><td>H</td><td>I</td><td>J</td><td>K</td><td>L</td></tr><tr><td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td><td>R</td><td>S</td></tr></table><br/>
<h2>功能点：</h2>
<h2>1.按住鼠标左键拖动选取单元格。选中的单元格背景变红色。</h2>
<h2>2.选中的单元格合并。</h2>
<h2>3.选中的单元格取消合并。</h2><input id="hb" value="合并单元格" type="button" >
<input id="qxhb" value="取消合并" type="button" >
<h2>输出修正后坐标位置：</h2>
<div id="xzh"></div>
</body>
</html>

js实现单元格合并和取消合并操作相关推荐

Python读取合并单元格数据并取消合并单元格——将每一行读取为列表
今天在解决需求的时候,遇到一个问题就是有一个Excel表格A列是合并单元格,但是我想读取的时候,希望读取到的内容是非合并单元格,也就是说想取消合并单元格,并自动补充数据,好啦,我们一起看一下,下面的 ...
如何通过 Java 合并和取消合并 Excel 单元格
在整理 Excel 中的数据时,我们不可避免地需要合并和取消合并单元格.同时,如果需要创建跨列或行的标题,我们可以合并 Excel 单元格以在电子表格中轻松完成此操作. 合并单元格是指将两个或多个单元 ...
如何取消合并单元格并保留单元格内容以及如何合并单元格
Sub 取消合并单元格并保留内容() Dim strmer As String '用于存储需要取消合并单元格的内容 Dim intcot As Integer '用于存储被合并单元格的 ...
html导出excel合并单元格,JS导出EXCEL,动态设置单元格格式，合并单元格(横向或纵向)等操作...
参考链接: https://blog.csdn.net/weixin_33724046/article/details/89611397 https://www.cnblogs.com/lvsk/p/ ...
excel字符串和单元格拼接_excel字符合并技巧：几种连接字符串的方法助你高效办公...
编按:哈喽,大家好!用excel连接字符串,是我们在日常工作中,比较常用的技巧.相信大家使用最多的连接方式就是"&".但其实,在excel中连接字符串的方法有很多,并且,看 ...
如何在Excel中将多个单元格中的文本合并到一个单元格中
If you have a large worksheet in an Excel workbook in which you need to combine text from multiple c ...
Word和Excel齐发力，将多个单元格的文本内容合并到一个单元格
有时候在处理Excel表格的时候,我们需要将多个单元格的文本内容合并到一个单元格中,中间添加\或,之类的分隔符.比如下面这个表格,左侧是原始单元格的内容,右侧是希望合并的结果,每个单元格之间用逗号分隔 ...
如何通过VB合并Excel单元格以及设置Excel行高？VB创建Excel表格，合并单元格，生成图形等操作
如何通过VB合并Excel单元格以及设置Excel行高? 例如:我想把第一列的第4,5,6,7行合并...我在怎样让合并单元格里的字居中,怎样改变字体. 请不吝赐教... ============== ...
java html合并单元格内容居中显示_合并Al：H1单元格区域，使合并的内容居中显示。...
合并Al:H1单元格区域,使合并的内容居中显示. 更多相关问题峰面积积分法有何特点? 电子邮件的发送和接收实际上是由ISP的()担任的. VFP的一个数据表文件最多允许有()条记录. 卡特尔认为,可 ...
Excel如何将合并单元格后面的数据合并
今天跟大家分享一下Excel如何将合并单元格后面的数据合并 1.打开Excel文件 2.选中合并单元格区域 3.点击下图选项(Excel工具箱,百度即可了解详细下载安装信息,本文这里就不做详细解说.) ...

js实现单元格合并和取消合并操作

js实现单元格合并和取消合并操作相关推荐

最新文章

热门文章