javascript - 单击单元格获取列标题和行标题

Question

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

$('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>

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

我建议将点击事件委托(delegate)给表格，而不是绑定(bind)点击每个 td，这样会提高性能。