当表格中单元格有rowSpan与colSpan时，如何获取单元格真正的坐标？

最新推荐文章于 2023-02-07 10:22:46 发布

xiaozaq

最新推荐文章于 2023-02-07 10:22:46 发布

阅读量1k

点赞数

分类专栏：自定义表单

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

版权

自定义表单专栏收录该内容

5 篇文章 1 订阅

订阅专栏

之前有写过一章介绍，当时没想明白算法逻辑，直接在网上抄了个算法，没仔细验证。后来发现算法还是有bug。有些情况没考虑全。

所以又花时间，整理下思路，自己写个算法来获取单元格真正的坐标。

会影响单元格A坐标因素有哪些？

答：1.同一行A左侧的单元格；2.A的左上方单元格。

并且rowSpan与colSpan只会对A的x坐标有影响，对y坐标没影响。

1.同一行A左侧的单元格是如何影响A的坐标的？

答：同一行只有单元格的colspan属性会影响A的x坐标。

2.A的左上方单元格是如何影响A的坐标的？

答：需要左上方的单元格rowspan属性配置使得它跨行到A行，并且是在A的左侧。

主要脚本分析：

1.getRealPos 函数。

首先遍历所有单元格，将相关rowSpan与colSpan等属性构造对象组成数组tdsPos。

2.然后逐个单元格坐标修复。修复顺序为从上到下，从左到右。即ABCDEFG。。。的顺序修复。

3.具体单元格坐标修复算法getTdRealPos。

分别对①②③中情况举例：

①修正B单元格时，A单元格对其坐标影响。

②此情况demo中没有显示，当应该也很容易理解。如假设demo中A的rowSpan值为2，修正I单元格时，A单元格就会对I的坐标产生影响。

③修正I单元格时，B单元格对其坐标影响。如不加次条件会导致E单元格也影响其坐标，导致出错。

demo：

<!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(){
	/**获取单元格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 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 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  };
			}
		}
		//计算同一行x的位置
        tdsPos.forEach(function (rowCols, y) {
            var nextPosx = 0;
            rowCols.forEach(function (col, x) {
            	col.pos = {};
                col.pos.x = nextPosx;
                col.pos.y = y;
                nextPosx = nextPosx + col.colspan;
            });
        });
		return tdsPos;
    }
	/**获取单元格修正后的坐标位置 */
	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  };
			}
		}
		//逐个单元格坐标修复。修复顺序为从上到下，从左到右。即ABCDEFG。。。的顺序修复。
        tdsPos.forEach(function (rowCols, y) {
            rowCols.forEach(function (col, x) {
                col.pos = getTdRealPos(tdsPos, y, x);
            });
        });
		return tdsPos;
    }
	function pd(tdsPos, area){

	}
	//打印单元格坐标
	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));
	var tdsRealPos = getRealPos($("#tableId").children().eq(0));
	printTablePos(t1, tdsPos);
	printTablePos(t2, tdsRealPos);
	//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>D</td>
			<td rowspan="2" >E</td>
			<td>F</td>
		</tr>
		<tr>
			<td colspan="2">G</td>
			<td rowspan="2">H</td>
			<td>I</td>
			<td>J</td>
		</tr>
		<tr>
			<td>K</td>
			<td>L</td>
			<td>M</td>
			<td>N</td>
			<td rowspan="2">O</td>
		</tr>
		<tr>
			<td>P</td>
			<td>Q</td>
			<td>R</td>
			<td>S</td>
			<td>T</td>
			<td>U</td>
		</tr>
	</table>
</div>
<h2>输出修正前坐标位置：</h2>
<div id="xzq"></div>
<h2>输出修正后坐标位置：</h2>
<div id="xzh"></div>
</body>
</html>