JQuery: Table Row Show/Hide based on Column Value

Question

I have a table that has a column with Yes/No as possible values

<table id="mytable">
<thead>
<tr>
    <th>
        Col1
    </th>
    <th>
        Col2
    </th>

    <th>
        ActiveYN
    </th>
</tr>
</thead>
<tbody>
<tr>
    <td>
        Apple
    </td>
    <td>
        12345
    </td>

    <td>
        Yes
    </td>
</tr>
<tr>
    <td>
        Orange
    </td>
    <td>
        67890
    </td>

    <td>
        No
    </td>
</tr>
<tr>
    <td>
        Mango
    </td>
    <td>
        456745
    </td>

    <td>
        Yes
    </td>
</tr>

I need to show the row if ActiveYN is 'Yes' and Hide id ActiveYN is 'No' How can i access the ActiveYN inside JQuery and show/hide accordingly?

Would make more sense to post the HTML and not the ASP, as jQuery is clientside and changes the HTML, not your severside code. — adeneo
– adeneo, Commented Jul 18, 2013 at 11:29

A. Wolff · Accepted Answer · 2013-07-18 11:50:17Z

10

DEMO

$('button').on('click', function () {
    var $rowsNo = $('#mytable tbody tr').filter(function () {
        return $.trim($(this).find('td').eq(2).text()) === "No"
    }).toggle();
});

answered Jul 18, 2013 at 11:50

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brandon J. Boone · Accepted Answer · 2013-07-18 11:45:58Z

4

How about something like this: $('td:contains("No")').parent().hide();

Live Demo

JS

$('input').click(function(){
    $('td:contains("No")').parent().toggle();
});

HTML

<input type='button' value='hide/show' />

<table id="mytable">
<thead>
<tr>
    <th>
        Col1
    </th>
    <th>
        Col2
    </th>

    <th>
        ActiveYN
    </th>
</tr>
</thead>
<tbody>
<tr>
    <td>
        Apple
    </td>
    <td>
        12345
    </td>

    <td>
        Yes
    </td>
</tr>
<tr>
    <td>
        Orange
    </td>
    <td>
        67890
    </td>

    <td>
        No
    </td>
</tr>
<tr>
    <td>
        Mango
    </td>
    <td>
        456745
    </td>

    <td>
        No
    </td>
</tr>

answered Jul 18, 2013 at 11:45

Brandon J. Boone

16.5k4 gold badges78 silver badges103 bronze badges

Comments

kevhann80 · Accepted Answer · 2013-07-18 12:26:08Z

2

usually I would add this as an attribute on the row:

<tr data-active="No">
....
</tr>

Then to hide them all you can do:

$(function(){

$("[data-active=No]").hide();
});

Or you can add different classes/styles based on the value when it creates the table.

answered Jul 18, 2013 at 12:26

kevhann80

3112 silver badges6 bronze badges

Comments

Abhitalks · Accepted Answer · 2013-07-18 11:51:29Z

1

You can do it from server side itself.

@if (item.ActiveYN) {
    <tr style="display: none;">
} else {
    <tr>
}

I don't know the razor syntax, but you get the idea.

To be able to do it from client-side, add a class.

@if (item.ActiveYN) {
    <tr class="hideMe">
} else {
    <tr>
}

And then in jQuery:

$('.hideMe').hide();

Edited again after your question was edited, now if we forget the server-side altogether:

$("mytable").find("tr:contains('No')").hide();

Use this statement in your button click handler function. But, remember it will also find any text which contains "No" anywhere in a row. To make it more precise, use regular expressions to search exactly a "No".

edited Jul 18, 2013 at 11:51

answered Jul 18, 2013 at 11:33

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

5 Comments

A. Wolff Over a year ago

But then it would be static, not depending of user's interaction

Abhitalks Over a year ago

Edited the answer. Now you can use it from client-side.

Srinivas Over a year ago

actually i should have posted plain html earlier, now i posted. i will put a button to hide or show.

Abhitalks Over a year ago

@Seenu You have edited the question and removed the server-side code. This will change the very context of the answer which was based on your server-side html generation.

Abhitalks Over a year ago

@Seenu See the edited answer based on your new question context.

Collectives™ on Stack Overflow

JQuery: Table Row Show/Hide based on Column Value

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related