Jquery to hide table rows depending on multiple values from different columns

Question

I would like to hide table rows after checking for accepted values in multiple columns.

The table would be:

<table id="my-table>
<tr><td class="name">John</td><td class="lastname">Doe</td></tr>
<tr><td class="name">Ann</td><td class="lastname">Doe</td></tr>
<tr><td class="name">John</td><td class="lastname">Smith</td></tr>
</table>

Based on my research so far (and this post), hiding all but John Doe would require the following Jquery phrase:

$("#my-table td.name:not(:contains('John')):td.lastname:not(:contains('Doe'))").parent().hide();

But Jquery doesn't like that and says Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: td

What's the right way to do this?

By the same token I'd like to understand how to make more complex queries such as: Hide all rows with 'first name' containing 'a' OR 'b' AND 'last name' containing 'x' OR 'y'.

What about changing colon to space in this section :td.lastname? — Hossein Shahsahebi
– Hossein Shahsahebi, Commented Aug 16, 2015 at 8:08
Yeah i tried that too. In which case I do not get an error message, but cannot see any effect on the table either. So it was an inconclusive test. — neydroydrec
– neydroydrec, Commented Aug 16, 2015 at 8:10

Kamina · Accepted Answer · 2015-08-16 08:11:30Z

5

Iterate on each tr instead then check each first and last td.

$( "tr" ).each( function( index, val ){
    if($(this).find("td:first-child").text() == 'John' && $(this).find("td:last-child").text() == 'Doe') {
        $(this).hide();
    }
});

Fiddle

Update: to hide all but John Doe

$( "tr" ).each( function( index, val ){
    if($(this).find("td:first-child").text() != 'John'  || $(this).find("td:last-child").text() != 'Doe') {
        $(this).hide();
    }
});

Fiddle

answered Aug 16, 2015 at 8:11

Kamina

13.8k12 gold badges55 silver badges87 bronze badges

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

7 Comments

neydroydrec Over a year ago

Iterating is how I thought it should be done initially, but didn't come across the .each() function. I like that :) Do you know of a good reference for practical Jquery use? C3School barely surfaces it.

neydroydrec Over a year ago

PS: how can I break or continue from this Jquery iteration? For instance I want to skip row 0 (the header row).

Kamina Over a year ago

@Benjamin Regarding skipping the header row, how about putting your header inside theadthen the other ones inside tbody something like this. Then on your selector $("tbody tr") so it only select tr inside tbody

Kamina Over a year ago

@Benjamin regarding the .text(), it really depends on what's inside td tag. If it's only the name then yes that means there's no need to do an extra code to get the value on your content attribute but, make sure you trim when you use text().

Kamina Over a year ago

@Benjamin Also about your first question, no sorry I don't have a specific site for reference other than asking/reading posts on Stackoverflow and also just by googling.

|

Pranav C Balan · Accepted Answer · 2015-08-16 08:16:58Z

3

Because :td is not a valid pseudo selector. You can use selector #my-table td.name:not(:contains('John')),#my-table td.lastname:not(:contains('Doe')). For multiple selector you can use ,.

$("#my-table td.name:not(:contains('John')),#my-table td.lastname:not(:contains('Doe'))").parent().hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="my-table">
  <tr>
    <td class="name">John</td>
    <td class="lastname ">Doe</td>
  </tr>
  <tr>
    <td class="name ">Ann</td>
    <td class="lastname ">Doe</td>
  </tr>
  <tr>
    <td class="name ">John</td>
    <td class="lastname ">Smith</td>
  </tr>
</table>

edited Aug 16, 2015 at 8:16

answered Aug 16, 2015 at 8:11

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

1 Comment

neydroydrec Over a year ago

From the reference you linked to, I understand the comma separator means OR (not AND), but in your example it works as AND. I'm confused about how I can ask either AND or OR. Could you please clarify?

Collectives™ on Stack Overflow

Jquery to hide table rows depending on multiple values from different columns

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related