Question

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

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

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

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，这样会提高效果。

Answer 2

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

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

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

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

2 个答案:

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