如何获取单元格真正的坐标（算法有bug）_单元格坐标=(坐标&坐标)-CSDN博客

本文链接：https://blog.csdn.net/xiaozaq/article/details/109854141

（PS：突然发现算法有bug，重新写了一份。新的算法见：https://blog.csdn.net/xiaozaq/article/details/110044124）

有bug的情况，如下图的Q和R的坐标：

废话不多说，直接看下面图：

由于单元格合并导致单元格索引与单元格坐标不一致。希望获取到修正后的单元格坐标。相关的脚本如下，基本思路与难点都有注释，需要的自己取用。

<!DOCTYPE html>
<html>
 <HEAD>
  <TITLE>0002获取修正后单元格坐标.html</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;}

  </style>
  <SCRIPT LANGUAGE="JavaScript">
$(function(){
	/**获取单元格真实的X坐标位置 */
 	function getRealPos(headRows) {
            var findFieldRows = void 0;
            //计算同一行x的位置
            headRows.forEach(function (rowCols, y) {
                var nextPosx = 0;
                rowCols.forEach(function (col, x) {
                    col.pos = {};
                    col.pos.x = nextPosx;
                    col.pos.y = y;
                    col.colspan = col.colspan || 1;
                    nextPosx = nextPosx + col.colspan;
                });
            });
            //计算 rowspan对后边行的影响
            for (var rowIndex = headRows.length - 1; rowIndex >= 0; rowIndex--) {
                var curRow = headRows[rowIndex];
                for (var cellIndex = 0; cellIndex < curRow.length; cellIndex++) {
                    var curCell = curRow[cellIndex];
                    console.log("正在处理的行：=》", curCell);
                    curCell.rowspan = curCell.rowspan || 1;
                    if (curCell.rowspan > 1) {
                        //将后边行中所有与当前cell相同位置的单元格依次后移当前单元格x相等的单元格后移当前单元格clospan个单位
                        //当前行影响以后（被rowspan包含）所有的行
                        for (var nextRowindex = rowIndex + 1; nextRowindex < headRows.length && curCell.rowspan > nextRowindex - rowIndex; nextRowindex++) {
                            //判断是否存在合并信息
                            var nextRow = headRows[nextRowindex];
                            for (var nextCellIndex = 0; nextCellIndex < nextRow.length; nextCellIndex++) {
                                var nextCell = nextRow[nextCellIndex];
                                if (nextCell.pos.x >= curCell.pos.x) {
                                    nextCell.pos.x += curCell.colspan;
                                    console.log("需要移动的列：=》", nextCell);
                                }
                            }
                        }
                    }
                }
        }
    }
	/**获取单元格修正前的坐标位置 */
	function getPos(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 curRowIdx = $(td).parent().prevAll().length;
				var curColIdx = $(td).prevAll().length;
				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(), pos:{x:curColIdx,y:curRowIdx},rowspan:rowSpan,colspan:colSpan  };
			}
		}
		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 + " )");
			}
		}
	}
	var t1 = $("#tableId").clone();
	t1.attr("id","tableId1");
	var t2 = $("#tableId").clone();
	t2.attr("id","tableId2");
	$("#xzq").append(t1);
	$("#xzh").append(t2);
	var tdsPos = getPos($("#tableId").children().eq(0));
	printTablePos(t1, tdsPos);
	getRealPos(tdsPos);
	printTablePos(t2, tdsPos);
	//var posList = getRealPos($("#tableId"));
})
  </SCRIPT>
 </HEAD>
<body>
<a href="index.html">返回</a>
<h1>0002获取修正后单元格坐标.html</h1>
<div>
	<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>
	</table>
</div>
<h2>输出修正前X坐标位置：</h2>
<div id="xzq"></div>
<h2>输出修正后X坐标位置：</h2>
<div id="xzh"></div>
</body>
</html>