I already have the function working on selecting a cell, using this:

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

I want it get the text from the header of the column (this is within thead and then it's own th tag), and also get the row header, this is the left most column on the table and is also denoted under a th tag.

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>

I already have the function working on selecting a cell, using this:

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

I want it get the text from the header of the column (this is within thead and then it's own th tag), and also get the row header, this is the left most column on the table and is also denoted under a th tag.

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>

• javascript
• jquery
• html-table

• Could you please include some attempted solutions, why they didn't work, and the expected results. That would really help! – palaѕн Commented Feb 14, 2014 at 11:44
• Providing actual HTML instead of describing it would be much better... – Fabricio Commented Feb 14, 2014 at 11:45
• I haven't actually attempted any solution. I looked at a few on SO, however none seem entirely relevant and simple enough. It's not exactly a fancy table. Expected results is just the text from the column's header. – TheBritishBloke Commented Feb 14, 2014 at 11:46
• @Fabricio I've added some sample HTML. – TheBritishBloke Commented Feb 14, 2014 at 11:50
• @TheBritishBloke it seems to have made all the difference. ;-) – Fabricio Commented Feb 14, 2014 at 15:03

3 Answers 3

Here we go, exotic blend of jQuery and pure 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()]);
});

Demo: http://jsfiddle/fv3gZ/

I would remend to delegate click events to the table, instead of binding click on each td, it would increase performance.

As your html structure if you wanted to get header of corresponding cell you can use siblings Try this:

demo : http://jsfiddle/qsDn5/29/

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

You can try this:

var td = document.getElementsByTagName("td"),
titles = document.getElementsByTagName("th")
for (var i = 0; i < td.length; i++) {
  td[i].addEventListener("click", function () {
    alert(titles[this.cellIndex].innerHTML);
  }, false);
}