Question

我有一个像

这样的场景

<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>

可能有数千行。

我需要获取该pertedulat td所属的td的id。

例如，

。如果我点击第三行的第三个t ..我应该得到相应的id的id，这里是myid3（这里是硬编码但它将根据服务器端的值设置）

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

Answer 1

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

工作JSfiddle：http://jsfiddle.net/6etRb/

如果动态添加表格行，您只需要使用实时委派，在这种情况下，您应该按照其他人的描述使用.on()。

Answer 2

以下答案有误，但我保留了编辑内容，因为它可以帮助某人

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

未经测试，但理论上应该有效。

<强> CORRECTION

以上是错误的，正如Felix Kling在下面指出的那样。获取索引的正确方法是调用$(this).index()。我原以为这会在匹配的选择器中找到$(this)的位置（在这种情况下，<td>中的每个<tbody>），但实际上，如果你通过index()函数没有参数，它找到相对于其兄弟的索引。感谢Felix指出the relevant documentation。

Answer 3

您可以使用eq()方法，请尝试以下操作：

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

请注意，live()已弃用，您可以改为使用on()。

Answer 4

首先，.live()函数已被弃用。如果要委派事件，请使用.on()（jQuery 1.7+）或.delegate()。我假设您正在使用.on()来完成剩余的工作，但如果您必须使用.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

这是你可以做到的一种方式：

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

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

Answer 6

处理程序可能如下所示：

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

如何在表中获取td中相应th的Id

6 个答案: