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 = ??
});           

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 = ??
});           

• javascript
• jquery

6 Answers 6

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

Working JSfiddle: http://jsfiddle/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.

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.

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
});

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.

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/p8SWW/4/

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');
}