Question

基本上与How can I get the corresponding table header (th) from a table cell (td)?相同，但不是特定于jQuery的问题。

从给定的<td>可以轻松找到相应的<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>

我喜欢这样做：

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

一个理想的答案可能包含jQuery方式和一个香草方式，但我个人正在寻找一个香草。

Answer 1

Pure JavaScript的答案。

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) + ')')

正如更多jQuery特定问题所述：https://stackoverflow.com/a/37312707/1524913

Answer 2

HTML表模型提供了更简单的解决方案。在这种情况下，jquery更复杂。我测试了下表：

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

没有jquery的脚本简单明了。

    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也很有用。

    $(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>可以放在顶部，底部和行之间。 tbody中的thead是明显错误但浏览器修复了它。脚本无论如何都适用。

Answer 3

我认为你需要通过 TH colSpans 来完全匹配 TD

试试

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];
}

请参阅 https://jsfiddle.net/Abeeee/upt75s2x/34/ 以获取工作示例

如何找到给定td的相应th？

3 个答案: