CODEWITHSUNDEEP
jqueryhtml-tabletablerow
Minghui Yu
Minghui Yu

Reputation: 1363

Use JQuery to hide all but two rows (tr) in a table

I have a table like this:

<table class="tableclass">
  <tbody>
    <tr>
       <th>..</th>
       <th>..</th>
    </tr>
    <tr class="odd">
       <td>..<</td>
       <td>..<</td>
    </tr> 
    <tr class="even">
       <td>..<</td>
       <td>..<</td>
    </tr> 
    <tr class="odd current">
       <td>..<</td>
       <td>..<</td>
    </tr> 
  </tbody>
</table>

There are many tr that have odd or even class, and they can be before or after tr that has current class.

I want to hide all but two rows below:

  1. The row (tr) that has "current" class

  2. The row (tr) that has <th>

In other words, I want the table becomes

<table class="tableclass">
  <tbody>
    <tr>
       <th>..</th>
       <th>..</th>
    </tr>
    <tr class="odd current">
       <td>..<</td>
       <td>..<</td>
    </tr> 
  </tbody>
</table>

I try to use

$("table.tableclass tr:not(.current)").hide();

But it hides tr that has th inside too.

Is there an AND operator? Something like 

$("table.tableclass tr:not(.current) AND tr:not(WITH NO CLASS)").hide();

Upvotes: 0

Views: 394

Answers (3)

gongzhitaao
gongzhitaao

Reputation: 6682

Why not change <tr><th></th></tr> to <thead><th></th></thead> and move this above the <tbody></tbody>? Anyway, it should be there.

Upvotes: 0

Mark
Mark

Reputation: 5720

you need to scope your selector to hide only odd/even classes but not current. so you are almost there.

$("table.tableclass tr.odd:not(.current), table.tableclass tr.even:not(.current)").hide()

Upvotes: 1

GautamD31
GautamD31

Reputation: 28763

Try like this

$("table .odd,.even").hide()

or individually you can hide like

$(".odd").hide();
$(".even").hide();

Upvotes: 0

Related Questions