jQuery / CSS: proper way to hide a column

Question

I am pretty new to jQuery and CSS and hope someone can help me with the following:

I have a standard HTML table with a colgroup, thead, tbody and several tr's and td's in the body and would like to use a CSS class to hide certain columns.

My CSS class looks like this:

.hideAll
{
    display:none;
}

What is the best / correct way to apply this class ? To the col's in the colgroup, to the th's in the thead, to the tr's or td's in the tbody or to several of them at the same time ?

My table looks something like this:

<table>
    <colgroup>
       <col />
       <col />
       <col />
    </colgroup>
    <thead>
        <tr><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
    </tbody>
</table>

Many thanks for any help with this, Tim.

Litash · Accepted Answer · 2013-11-23 10:16:58Z

3

if you know which exactly column you want to hide. Give it a class name.

<table>
<colgroup>
   <col />
   <col />
   <col />
</colgroup>
<thead>
    <tr><th class="target">AAA</th><th>BBB</th><th>CCC</th></tr>
</thead>
<tbody>
    <tr><td class="target">111</td><td>111</td><td>111</td></tr>
    <tr><td class="target">222</td><td>222</td><td>222</td></tr>
    <tr><td class="target">333</td><td>333</td><td>333</td></tr>
</tbody>

Then you can use jquery addClass() method to add your hideAll class to them.

$('.target').addClass('hideAll');

Demo

answered Nov 23, 2013 at 10:16

Litash

1821 silver badge11 bronze badges

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

1 Comment

Litash Over a year ago

You're welcome. Btw, if you want to remove the class use what @andrea.spot suggested.

andrea.rinaldi · Accepted Answer · 2013-11-23 10:17:35Z

3

Like @drip already told you, it would be usefull adding some class name to your table's children.

Anyway you can set the given class to your elements like this:

$('myElementSelector').addClass('hideAll');

and then if you want to remove the class, the code will be:

$('myElementSelector').removeClass('hideAll');

For jQuery selector, I suggest you to read jQuery selectors' documentation.

But if you are new to jQuery world and in the future you won't need it so much, you can consider learning KnockoutJS, which elevates you from pure dom management.

Hope it helps :)

answered Nov 23, 2013 at 10:17

andrea.rinaldi

1,1871 gold badge13 silver badges34 bronze badges

3 Comments

user2571510 Over a year ago

Thanks for the fast reply - this helped a lot !

user2274431 Over a year ago

Great answer man! I think i'll take a look at that KnockoutJS ;)

andrea.rinaldi Over a year ago

Nice to you ear that from both of you.. See ya!

drip · Accepted Answer · 2013-11-23 10:07:57Z

0

Pretty much you can just stack them and add the class.

$('col,tr,th,td').addClass('hideAll')

But it really depends which one exactly you want to hide.

If this is just for "try" than this is good. But if have a large project you might consider adding some kind of class to the table and targeting it instead all of the elements trough out the page.

answered Nov 23, 2013 at 10:07

drip

13k2 gold badges35 silver badges53 bronze badges

Comments

Kevin Cittadini · Accepted Answer · 2013-11-23 10:23:08Z

0

http://jsfiddle.net/L4TEq/

I made a simple script which allows you to hide an entire column just giving to a column class="hidden".

This might help and semplify your work.

It's based on elements index. In this way, you can hide all corresponding ths and tds with the same index of the column.

answered Nov 23, 2013 at 10:23

Kevin Cittadini

1,4791 gold badge22 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery / CSS: proper way to hide a column

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related