How to get the Id of corresponding th of td in a table

Question

I have a scenario like

<table>
    <thead>
        <tr>
            <th id ="myid1">header1</th>
            <th id ="myid2">headre "2</th>
            <th id ="myid3">header3</th>
        </tr>
    </thead>
        <tr>
            <td>v1</td>
            <td>v2</td>
            <td>v3</td>
        </tr>
        <tr>
            <td>v10</td>
            <td>v11</td>
            <td>v12</td>        
        </tr>
        <tr>
            <td>v20</td>
            <td>v21</td>
            <td>v22</td>                    
        </tr>
        <tr>
            <td>v30</td>
            <td>v31</td>
            <td>v32</td>                    
        </tr>
</table>

there can be thousands of row .

i need to get the id of the td on which that perticulat td belongs to.

for example . if i click the third td of third row .. i should get the id of corresponding th , here it is myid3 (here its hard coded but it will set based on the value from server side)

$('tbody td').live('click', function() {
    var idOfTh = ??
});           

Answer 1

$(function(){
    $('td').click(function() {
        alert($('table th').eq($(this).index()).attr('id'));
    });
});

Working JSfiddle: http://jsfiddle.net/6etRb/

You only need to use live delegation if the table rows are being added dynamically, and in that case you should use .on() as described by others.

Answer 2

The following answer is wrong, but I'm keeping the edit as it may help someone

$('tbody td').live('click', function() {
    var tdIndex = $(this).parent('tr').indexOf($(this));
    var idOfTh = $(this).parent('table').find('tr').eq(tdIndex);
});

Untested, but theoretically should work.

CORRECTION

The above is incorrect, as pointed out by Felix Kling below. The correct way to get the index is simply by calling $(this).index() . I had presumed this would find the position of $(this) within the matched selector (in this case, every <td> in the <tbody> ), but actually, if you pass the index() function no arguments, it finds the index relative to its siblings . Thanks to Felix for pointing out the relevant documentation .

Answer 3

You can use eq() method, try the following:

 $('tbody td').live('click', function() {
     var ind = $(this).index()
     var idOfTh = $('thead th:eq('+ind+')').attr('id')
 });

Please note that live() is deprecated you can use on() instead.

Answer 4

First of all, the .live() function has been deprecated. If you want to delegate events, use either .on() (jQuery 1.7+) or .delegate() . I'll assume you're using .on() for the rest of this, but there's only a minor syntax change (switch the first two arguments) if you have to use .delegate() .

$(document).on('click', 'tbody td', function() {
    var tdIndex = $(this).index();
    // ^ gets the index of the clicked element relative to its siblings
    var thId = $('thead th:eq(' + tdIndex + ')')[0].id; 
    // ^ selects the th element in the same position in its row, then gets its id
});

Answer 5

Here's a way you could do it:

$('td').click(function() {
   var colNum = $(this).parent().children().index($(this)) + 1;
   alert($('#myid' + colNum).text());    
});​

jsfiddle: http://jsfiddle.net/p8SWW/4/

Answer 6

The handler can looks like:

function() {
    var self = this
    var th_num = 0;

    $(this).parent().children().each(function(num){
        if (this == self) {
            th_num = num;
            return false
        }
    });

    var th_id = $('thead th').eq(th_num).attr('id');
}