jQuery 导航 DOM 到最近的 tr in table

Question

我需要 select 行 tr 属性(class) 并更改它。当我想 select this tr top from cell:

时，我迷路了

HTML:

<table>
    <tr class="a">
        <td>name</td>
        <td>text</td>
        <td>text22222</td>
        <td><input type="checkbox" class="inpu" /></td>
    </tr>
    <tr class="a">
        <td>name</td>
        <td>text</td>
        <td>text2</td>
        <td><input type="checkbox" class="inpu" /></td>
    </tr>
</table>

jQuery:

$('.inpu').click(function()
{
     alert( $(this).parent().parent().closest('tr')[0].html() );                         
});

Link to jsfiddle sample

Answer 1

你太复杂了直接使用closest()

var tr = $(this).closest('tr');

您当前的问题是 $(this).parent().parent() 引用 tr 并且它没有 tr 作为父元素，因此您的代码无法正常工作。

$(this) //Element
.parent() //TD
.parent() //TR

Answer 2

可以直接在this引用上使用closest()获取特定类型最近的父元素，然后调用addClass修改class属性:

$('.inpu').click(function() {
    $(this).closest('tr').addClass('foo');
});

Answer 3

$('.inpuy').click(function(){
        alert( $(this).closest('tr').html() );
});

Answer 4

只需使用Closest()函数..

$('.inpu').click(function(){

alert( $(this).closest('tr').prop('class') );
      
$(this).closest('tr').addClass('abc')  ;          
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
    <tr class="a">
        <td>name</td>
        <td>text</td>
        <td>text22222</td>
        <td><input type="checkbox" class="inpu" /></td>
    </tr>
    <tr class="a">
        <td>name</td>
        <td>text</td>
        <td>text2</td>
        <td><input type="checkbox" class="inpu" /></td>
    </tr>
</table>

jQuery 导航 DOM 到最近的 tr in table

jQuery navigate DOM to closest tr in table

jquery

dom