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, Aug 16 '15 at 08: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, Aug 16 '15 at 08:10

score 5 · Accepted Answer · answered Aug 16 '15 at 08:11

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 '15 at 08:11

Robin Carlo Catacutan

13,249
11
52
85

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 Aug 16 '15 at 08:25
PS: how can I break or continue from this Jquery iteration? For instance I want to skip row 0 (the header row). – neydroydrec Aug 16 '15 at 10:07
And another question if you don't mind: is it better to look for the .text() value of the td's OR should I also add a `content` attribute to them and look up for that attribute's values? – neydroydrec Aug 16 '15 at 10:10
1

@Benjamin Regarding skipping the header row, how about putting your header inside `thead`then the other ones inside `tbody` something like [this](http://www.html5-tutorials.org/tables/thead-tbody/). Then on your selector `$("tbody tr")` so it only select `tr` inside `tbody` – Robin Carlo Catacutan Aug 16 '15 at 10:30
1

@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()`. – Robin Carlo Catacutan Aug 16 '15 at 10:35
1

@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. – Robin Carlo Catacutan Aug 16 '15 at 10:39
Great answer anyway, thanks a lot. I think I'll use an attribute because some of my columns will display an icon for certain values, and no text. So i'll still need to search for a 'true' / 'false' hidden in the HTML. Thanks again. – neydroydrec Aug 16 '15 at 11:12

Pranav C Balan · Answer 2 · 2015-08-16T08:16:58.067

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 '15 at 08:16

answered Aug 16 '15 at 08:11

Pranav C Balan

113,687
23
165
188

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? – neydroydrec Aug 16 '15 at 08:22

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

2 Answers2