How to hide All rows except current (clicked Row) using jQuery?

I want to hide all rows when i click the particular row except current one row.

<table>
@foreach (var item in Model)
    {
        idValue++;

        <tr class="tableRow" id="@idValue">
            <td class="master"  id="@item.Batch_Seq">
                <a href= "#" >@(item.Batch_Name)></a>
            </td>
            <td>
                @(item.Present)
            </td>
            <td>
                @(item.Absent)
            </td>
            <td>
                @(item.HalfDay)
            </td>
            <td>
                @(item.Batch_count)
            </td>
        </tr>

    }
</table>

I tried like this

$('.tableRow').hide();
$(this).closest('tr:not(.tableRow)').hide();

Could anyone help me?

How to hide All rows except current (clicked Row) using jQuery?

I want to hide all rows when i click the particular row except current one row.

<table>
@foreach (var item in Model)
    {
        idValue++;

        <tr class="tableRow" id="@idValue">
            <td class="master"  id="@item.Batch_Seq">
                <a href= "#" >@(item.Batch_Name)></a>
            </td>
            <td>
                @(item.Present)
            </td>
            <td>
                @(item.Absent)
            </td>
            <td>
                @(item.HalfDay)
            </td>
            <td>
                @(item.Batch_count)
            </td>
        </tr>

    }
</table>

I tried like this

$('.tableRow').hide();
$(this).closest('tr:not(.tableRow)').hide();

Could anyone help me?

• javascript
• jquery

3 Answers 3

You seem to want this :

$('.tableRow').click(function(){
     $('.tableRow').hide(); // hide all rows
     $(this).show(); // show the clicked one
});

Note that the user can't notice the row was hidden then shown : the screen isn't repaint until the event handler ends.

Use .not() to select all elements with class tableRow except for the one that was clicked(this)

$('tr.tableRow').click(function() {
    $('tr.tableRow').not(this).hide();
});

You can use not() to hide everything that isn't "this":

 $('table tr.tableRow').click(function(){
        $('table tr').not(this).hide(); // hide everything that isn't "this"
    });

or you can use .siblings() to hide the siblings of the clicked row

$('table tr').click(function(){
    $(this).siblings().hide(); // hide the siblings of the clicked row
});

Working example : http://jsfiddle/ouadie/U7eUR/