KyleVarga.com My Blog

jQuery Tip : Get Column Header Text from TD Element

I ran into an issue where given a specific TD element (ie, i have
<td onclick="javascript:onTDclick(this);"></td>, and I wanted to display it’s header, I looked around a little bit, but did not find any great way to get the header text, so I did some research. Using jQuery [which I highly recommend] I came up with the following code:

var $rows = $( "thead td" ).get();
var header = $($rows[ele.cellIndex]).text();

You can then use JavaScript function encodeURIComponent() to escape and pass it to an AJAX function call.

I use it to pass it to an AJAX function that displays code to update the database for that object, i.e. inline table editing.

**EDIT: Forgot to mention that the header row must be surrounded with and

Sample:
<table>
<thead>
<tr><td>Column Header 1</td><td>Column Header 2</td></tr>
</thead>
<tbody>
<tr><td>data 1</td><td>data 2</td></tr>
</tbody>
</table>