CODEWITHSUNDEEP
jqueryhtml-tablehide
Dimitri
Dimitri

Reputation: 111

Hide tr if its td don't contains text

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

Upvotes: 4

Views: 9821

Answers (4)

Nandakumar
Nandakumar

Reputation: 1101

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

Upvotes: -1

billyonecan
billyonecan

Reputation: 20260

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

Upvotes: 6

Hugo Tostes
Hugo Tostes

Reputation: 412

try this:

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

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

Upvotes: 0

bitkot
bitkot

Reputation: 4504

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

Upvotes: 0

Related Questions