(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" 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>