td单元格内，有未知层dom结构

<style>.highlight {background-color: yellow;}
</style>
<table id="myTable"><colgroup><col style="background-color: lightblue;"><col style="background-color: lightgreen;"></colgroup><tbody><tr><td>单元格 1</td><td>单元格 2</td></tr><tr><td>单元格 3</td><td>单元格 4</td></tr></tbody>
</table>

监听用户框选单元格的行为

const table = document.querySelector('#detil-tbale .ant-table .ant-table-scroll .ant-table-body table.ant-table-fixed',
);
const cells = table.getElementsByTagName('td');
let isMouseDown = false;
let startCell, endCell;
// 鼠标按下事件监听
table.addEventListener('mousedown', function (e) {isMouseDown = true;startCell = e.target;endCell = e.target;selectCells();
});
// 鼠标移动事件监听
table.addEventListener('mousemove', function (e) {if (!isMouseDown) return;endCell = e.target;selectCells();
});
// 鼠标释放事件监听
table.addEventListener('mouseup', function () {isMouseDown = false;
});
// 框选和着色函数
function selectCells() {// 清除所有单元格的 highlight 类for (let cell of cells) {cell.classList.remove('highlight');}// 确定选区范围let [startRow, startCol] = getCellIndex(startCell);let [endRow, endCol] = getCellIndex(endCell);// 确定起始和结束行、列let minRow = Math.min(startRow, endRow);let maxRow = Math.max(startRow, endRow);let minCol = startCol; // 只选择起始列let maxCol = startCol; // 只选择起始列// 遍历选区内的单元格并着色for (let row = minRow; row <= maxRow; row++) {let cell = table.rows[row].cells[minCol];cell.classList.add('highlight');}
}
// 辅助函数：获取单元格的行列索引
function getCellIndex(cell) {const td = findRootElement(cell)const tr = td.parentNodeconsole.log(columns[td.cellIndex],'safasfasafs');return [tr.rowIndex, td.cellIndex];
}
function findRootElement(element) {if(element.tagName === 'TD') return elementif(element.parentElement.tagName === 'TD') return element.parentElementwhile (element.parentElement.tagName !== 'TD') {element = element.parentElement;}return element.parentElement
}