Use the function [closest()][1].
Then use index() to find the corresponding th of td.
Also assign id to parent table
HTML
<table id="tbl1" border="1">
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td class="edit">row 1, cell 1</td>
<td class="edit">row 1, cell 2</td>
</tr>
<tr>
<td class="edit">row 2, cell 1</td>
<td class="edit">row 2, cell 2</td>
</tr>
</table>
Javascript
$('#tbl1').on('click', '.edit', function () {
var th = $('#tbl1 th').eq($(this).index());
alert(th.text()); // returns text of respective header
});
[1]: http://api.jquery.com/closest/
The function [closest()][1] loop in ancestors up the `DOM` tree and th is not parent of td so closest is not right option. First of all use class if you are having same id for more than one elements. Secondly use index() to find the corresponding `th` of `td`. For being specific assign `id` to parent table so that the script does not operate on other `tables / td` on page.
**[Live Demo][2]**
*Html*
<table id="tbl1" border="1">
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td class="edit">row 1, cell 1</td>
<td class="edit">row 1, cell 2</td>
</tr>
<tr>
<td class="edit">row 2, cell 1</td>
<td class="edit">row 2, cell 2</td>
</tr>
</table>
*Javascript*
$('#tbl1').on('click', '.edit', function () {
var th = $('#tbl1 th').eq($(this).index());
alert(th.text()); // returns text of respective header
});
[1]: http://api.jquery.com/closest/
[2]: http://jsfiddle.net/XRRhB/
