单击单击框获取列标题和行标题

Question

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

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

我希望它从列的标题中获取文本(这是在thead中,然后是它自己的标记),并且还获得行标题,这是表格中最左边的列,并且也在th标记下表示.

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/

我建议将点击事件委托给表,而不是绑定每个点击事件td,这会提高性能.