Hide tr if its td don't contains text

Question

I want to hide tr if its td doesn't contain text2. When I am using this code:

$('td:contains("text2")').parent().toggle()}))

it hides tr which contains text2 in td , but I want to hide all table row that don't contain text2 in td, so I wrote this code:

$('td:not(:contains("text2"))').parent().toggle()}))

but it hides all rows.

jsfiddle example

Answer 1

The problem you have currently is that if a td doesn't contain text2 , it'll hide the entire row regardless of whether or not a sibling td contains the text.

Without altering any of the markup, the best thing I can think of would be to select the first td of each row, and then filter on the parent tr :

$('td:first-child').parent('tr:not(:contains("text2"))').toggle();

Or you could filter directly on the tr , omitting those which have th elements (so that your row containing th's don't get hidden):

$('tr:not(:has(th)):not(:contains("text2"))').toggle();

Here's a fiddle

Answer 2

It is not working because if any of the column does not contain text2 then it will hide the row.

You can use the following but you will have to differentiate between header and other rows if the condition is for any column.

contains() works for any descendant so you can directly check condition for the tr

$('tr:not(.head):not(:contains("text2"))').toggle()

Here's the updated JSFiddle

Answer 3

try this:

$(document).ready(function(){
    $('#contains').change( function() {
        $('td:contains("text2")').parent().toggle()
    });

    $('#notContains').change( function() {
        $('td').parent().toggle();
        $('td:contains("text2")').parent().toggle();
    });
});

Answer 4

Change with this Code :

U are Good but Initially U have to find the element so use find...

Parent:

Get the parent of each element in the current set of matched elements, optionally filtered by a selector.

Find:

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

So, Change with this Code :

Hides td With text2:

     $(document).find('td:contains("text2")').toggle()}));

Hides td Without text2:

     $(document).find('td:not(:contains("text2"))').toggle()}));

Here is the Code

$(document).ready( 
$('#contains').change( function() {
    $(document).find('td:contains("text2")').toggle()}));
 $(document).ready( 
 $('#notContains').change( function() {

  $(document).find('td:not(:contains("text2"))').toggle()}));

Demo

Thanks Dude