How to hide a table row in jQuery?

Question

I have a table such as this

            <table class="headerTable" id="headerTable">
                <tbody>
                    <tr class="hh">
                        <td>test1</td>
                        <td>18,164</td>
                    </tr>
                    <tr class="member">
                        <td>test3</td>
                        <td>24,343</td>
                    </tr>
                </tbody>
            </table>

I want to hide the rows with class member.

I did something like this but it is not working..

$("#headerTable tbody tr:member").hide();

Answer 1

Try this

$("#headerTable tbody tr.member").hide();

The selectors in jQuery like CSS selectors, so you should be able to use them like that.

You can browse the jQuery selector documentation here, it's full of interesting things you can do.

Answer 2

$("#headerTable .member").hide();

Answer 3

To specify a class using CSS use a dot to signify that it's a class, not a colon. The colon is used by jQuery for filters.

$("tr.member").hide();

Is just fine unless you want to be specific to a table.

Answer 4

You could also use find.

$('#headerTable').find('.member').hide();

Or if all the rows (elements, actually) with class member should be hidden:

$('.member').hide();

should work.