CODEWITHSUNDEEP
jquerydom
Jerry1
Jerry1

Reputation: 372

jQuery navigate DOM to closest tr in table

I need to select row tr property(class) and change it. I am lost when I want to 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

Upvotes: 1

Views: 5696

Answers (4)

void
void

Reputation: 36703

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

Upvotes: 0

Dhaval
Dhaval

Reputation: 2379

Just Use Closest() Function ..

$('.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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337610

You can use closest() directly on the this reference to get the nearest parent element of a specific type, then call addClass to amend the class property:

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

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You are over-complicating thing use closest() directly

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

You current problem is $(this).parent().parent() is referring to tr and it doesn't have tr as parent element, thus your code is not working.

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

Upvotes: 2

Related Questions