天天看點

如何擷取單元格真正的坐标(算法有bug)

(PS:突然發現算法有bug,重新寫了一份。新的算法見:https://blog.csdn.net/xiaozaq/article/details/110044124)

有bug的情況,如下圖的Q和R的坐标:

如何擷取單元格真正的坐标(算法有bug)

廢話不多說,直接看下面圖:

如何擷取單元格真正的坐标(算法有bug)

由于單元格合并導緻單元格索引與單元格坐标不一緻。希望擷取到修正後的單元格坐标。相關的腳本如下,基本思路與難點都有注釋,需要的自己取用。

<!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" target="_blank" rel="external nofollow" >傳回</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>
           

繼續閱讀