How to get the cell element that is spanning another cell element in a table using JavaScript

Question

We have a table:

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

Using JavaScript or jQuery, how would we able to get the column element (or its index) of the first row that is spanning the cell with id "target"? I don't really want to use any box positioning method (is: getBoundingClientRect()) technique.

In this example, the associated cell element that is spanning "target" is the cell with text "Column 2".

Answer 1

Here is a solution for the case, that the second row also has colspans and there is no third row:

---

Iterate over the cells of the second row with a for loop and count their colspans until you find your target cell (if there is no colspan defined it is automatically '1'). Then iterate over the cells of the first row and count their colspans until the count is equal or bigger then the count of the second row. In that case you have found the desired head cell.

Working example:

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>

Answer 2

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