3

我有一个像

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

可以有上千行。

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

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

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

6 回答 6

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

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

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

于 2012-08-02T14:22:17.927 回答
1

以下答案是错误的，但我保留编辑，因为它可能对某人有所帮助

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

未经测试，但理论上应该可以工作。

更正

正如下面的 Felix Kling 指出的那样，上述内容是不正确的。获取索引的正确方法是简单地调用$(this).index(). 我原以为这会$(this)在匹配的选择器中找到 的位置（在这种情况下，<td>在 中的every <tbody>），但实际上，如果你index()不给函数传递参数，它会找到相对于它的兄弟姐妹的索引。感谢 Felix 指出相关文档。

于 2012-08-02T14:19:55.383 回答
1

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

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

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

于 2012-08-02T14:20:46.137 回答
1

首先，该.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
});
于 2012-08-02T14:22:11.223 回答
0

这是您可以做到的一种方法：

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

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

于 2012-08-02T14:26:11.140 回答
0

处理程序可能如下所示：

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');
}
于 2012-08-02T14:26:48.160 回答