单击单元格时获取列标题和行标题答案

【问题标题】：Get column header and row header on cell click单击单元格时获取列标题和行标题
【发布时间】：2014-02-14 11:43:03
【问题描述】：

我已经有了选择单元格的功能，使用这个：

$('td').click(function(){
    //do things here
}

我希望它从列的标题中获取文本（这是在 thead 中，然后是它自己的 th 标记），并且还获取行标题，这是表上最左边的列，也用 a 表示第标签。

HTML：

<table>
<thead>
<tr>
    <th>Day/Time</th>
    <th>10:00</th>
    <th>11:00</th>
    <th>12:00</th>
</tr>
<tbody>
<tr>
    <th>Monday</th>
    <td>Cell data</td>
    <td>Cell data</td>
    <td>Cell data</td>
</tr>
<tr>
    <th>Tuesday</th>
    <td>Cell data</td>
    <td>Cell data</td>
    <td>Cell data</td>
</tr>
<tr>
    <th>Wednesday</th>
    <td>Cell data</td>
    <td>Cell data</td>
    <td>Cell data</td>
</tr>
</tbody>
</table>

【问题讨论】：

能否请您提供一些尝试的解决方案，为什么它们不起作用，以及预期的结果。那真的很有帮助！
提供实际的 HTML 而不是描述它会更好...
我实际上没有尝试任何解决方案。我在 SO 上看了一些，但似乎没有一个是完全相关且足够简单的。这不完全是一张花哨的桌子。预期结果只是列标题中的文本。
@Fabricio 我添加了一些示例 HTML。
@TheBritishBloke 似乎改变了一切。 ;-)

标签： javascript jquery html-table

【解决方案1】：

我们开始吧，jQuery 和纯 JS 的异国混合：

$('table').on('click', 'td', function(e) {  
    var time = e.delegateTarget.tHead.rows[0].cells[this.cellIndex],
        day  = this.parentNode.cells[0];

    alert([$(day).text(), $(time).text()]);
});

演示：http://jsfiddle.net/fv3gZ/

我建议将点击事件委托给表格，而不是在每个td 上绑定点击，这样可以提高性能。

【讨论】：

完美运行！我不知道如果你将它委托给表格它会起作用，我认为它会就像你点击整个表格而不是单个单元格一样。非常感谢！
@dfsq .click( handler(eventObject) ) 是.on( "click", handler ) 的快捷方式。你知道.on( "click", 'td', handler )有快捷方式吗？
@Fabricio 不，没有更短的版本。
@dfsq 感谢您的确认。在我询问后，我正在阅读 .on(...) 和 .click(...) 的 fine 手册并得出相同的结论...
如果我有一个像单元格数据这样的表结构，并且我想通过仅单击具有显示类的那些单元格来显示此标题数据。

【解决方案2】：

如果你想获取相应单元格的标题，作为你的 html 结构，你可以使用siblings 试试这个：

演示：http://jsfiddle.net/qsDn5/29/

  $('td').on('click',function() {
       var text = $( this ).siblings('th').text();
        alert(text);
    });

【讨论】：

@TheBritishBloke：你想要这个吗？
这几乎是完美的，我该如何选择时间标题？我以为它会是 .parent 但它不起作用。