Tenemos una mesa:
<table> <tbody> <tr> <td>Column 1</td> <td colspan="3">Column 2</td> <td>Column 3</td> <td colspan="99999">Column 4</td> </tr> <tr> <td>A</td> <td>B</td> <td id="target">C</td> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table>Usando JavaScript o jQuery, ¿cómo podríamos obtener el elemento de columna (o su índice) de la primera fila que abarca la celda con id "objetivo"? Realmente no quiero usar ningún método de posicionamiento de cuadro (es: técnica getBoundingClientRect()).
En este ejemplo, el elemento de celda asociado que abarca "objetivo" es la celda con el texto "Columna 2".
Aquí hay una solución para el caso en que la segunda fila también tiene columnas y no hay una tercera fila:
Itere sobre las celdas de la segunda fila con un bucle for y cuente sus colspans hasta que encuentre su celda de destino (si no hay colspan definido, es automáticamente '1' ). Luego itere sobre las celdas de la primera fila y cuente sus colspans hasta que el conteo sea igual o mayor que el conteo de la segunda fila. En ese caso, ha encontrado la celda de cabecera deseada.
Ejemplo de trabajo:
const head_cells = document.querySelectorAll('#head-row td'); const target_cells = document.querySelectorAll('#target-row td'); let head_position = 0; let target_position = 0; for (i = 0; i < target_cells.length; i++) { target_position += target_cells[i].colSpan; if (target_cells[i].id === 'target') { for (k = 0; k < head_cells.length; k++) { head_position += head_cells[k].colSpan; if (head_position >= target_position) { console.log(head_cells[k].textContent); break; } } break; } } <table> <tbody> <tr id="head-row"> <td>Column 1</td> <td colspan="4">Column 2</td> <td>Column 3</td> <td colspan="99999">Column 4</td> </tr> <tr id="target-row"> <td>A</td> <td colspan="2">B</td> <td id="target">C</td> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table> <script> function findHeader(cell) { let count = cell.cellIndex + 1; // 3 for(let header of headers.cells) { const colspan = +header.getAttribute('colspan') || 1; count -= colspan; if (count<1) return alert(header.textContent); } } </script> <table border=1> <tbody> <tr id="headers"> <td>Column 1</td> <td colspan="3">Column 2</td> <td>Column 3</td> <td colspan="99999">Column 4</td> </tr> <tr> <td>A</td> <td>B</td> <td onclick="findHeader(this)">Click</td> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table>