JQuery: show / hide table row based on column value

Question

I have a table in which there is 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 line if ActiveYN is “Yes” and Hide id ActiveYN is “No”, How can I access ActiveYN inside JQuery and show / hide accordingly?

Answer 1

Demo

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

Answer 2

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> 

Answer 3

You can do this from the server side.

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

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

To do this on the client side, add a class.

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

And then in jQuery:

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

Edited again after your question has been edited, now if we forget the server side at all:

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

Use this operator in the button handler function. But, remember, he will also find any text that contains “No” anywhere in a row. To make it more accurate, use regular expressions to search for "No."

Answer 4

I would usually add this as an attribute in a string:

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

Then, to hide everything you can do:

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

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