javascript - How to get the Id of corresponding th of td in a table - Stack Overflow

admin管理员组

文章数量:1414614

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

Share Improve this question Follow edited Aug 2, 2012 at 14:22 Zoltan Toth 47.7k1212 gold badges131131 silver badges138138 bronze badges asked Aug 2, 2012 at 14:14 maazmaaz 3,6642222 gold badges6565 silver badges106106 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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

本文标签： javascriptHow to get the Id of corresponding th of td in a tableStack Overflow