How to find the corresponding th to a given td?

Question

Basically the same question as How can I get the corresponding table header (th) from a table cell (td)? but not jQuery specific.

From a given <td> is there an easy way to find the corresponding <th> ?

    <table width="100%" id="stock">
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Quantity</th>
            <th>Options</th>
        </tr>
        <tr>
            <td>foo</td>
            <td id="target">bar</td>
            <td>-1</td>
            <td>...</td>
        </tr>

I'd like something doing this:

 document.getElementById('target').correspondingTH // would return HTMLObject <th>Type</th>

An ideal answer might contain both a jQuery way to do it and a vanilla one but I'm personally looking for a vanilla one.

Answer 1

Pure JavaScript's answer.

var index = Array.prototype.indexOf.call(your_td.parentNode.children, your_td)
var corresponding_th = document.querySelector('#your_table_id th:nth-child(' + (index+1) + ')')

As posted here in the more jQuery specifc question: https://stackoverflow.com/a/37312707/1524913

Answer 2

HTML table model gives easier solution. jquery in this case is more sophisticated. I tested following table:

<table style="width:100%" id="stock">
    <tbody>
        <tr>
            <td>foo</td>
            <td id="target">bar</td>
            <td>-1</td>
            <td>...</td>
        </tr>
        <tr>
            <td>foo</td>
            <td id="target">bar</td>
            <td>-1</td>
            <td>...</td>
        </tr>
    </tbody>
    <tr>
        <td>foo</td>
        <td id="target">bar</td>
        <td colspan="2">-1</td>
        <!--<td>...</td>-->
    </tr>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Quantity</th>
            <th>Options</th>
        </tr>
    </thead>
    </table>

Script without jquery is simple and straightforward.

    window.onload = function () {
        var tbl = document.getElementById('stock');
        var tds = document.getElementsByTagName('td');
        for (var i = 0, td; td = tds[i]; ++i) {
            td.onclick = function () {
                var tr = this.parentNode;
                console.log(tbl.rows[0].cells[this.cellIndex].innerHTML);
            }
        }
    }

jquery also is useful.

    $(document).ready(function () {
        $('#stock td').click(function () {

            console.log($(this).parents('table').find('tr:first-child').children('th:nth-child(' + (this.cellIndex + 1) + ')').html());
        });
    });

<thead> can be placed at the top, at the bottom, and between rows. thead inside tbody is obvious error but browser fixes it. Scripts work in any case.

Answer 3

I think you need to step through the TH colSpans to exactly match the TD

Try

function getHeadCell(td) {
  var index = Array.prototype.indexOf.call(td.parentNode.children, td);

  var table = td;
  while (table && table.tagName != 'TABLE') table = table.parentNode;

  var cx = 0;
  for (var c = 0; cx <= index; c++) cx += table.rows[0].cells[c].colSpan;

  return table.rows[0].cells[c - 1];
}

See https://jsfiddle.net/Abeeee/upt75s2x/34/ for a working example