Hiding HTML table columns with JavaScript

Question

I want to hide certain columns of a HTML template with JavaScript. Could anybody tell me how can I achieve this? I've tried giving IDs to the entire column TDs and then making document.getElementById("ID").style.display = "none" but it hides only the first TD.

Thank you.

An id has to be unique. Use class instead.

jrn.ak
– jrn.ak

2011-03-04 21:44:04 +00:00
Commented Mar 4, 2011 at 21:44 — jrn.ak
– jrn.ak, Commented Mar 4, 2011 at 21:44

Richard Slater · Accepted Answer · 2011-03-04 21:45:36Z

4

Have you considered using the jQuery Library?

$('.tdCssClass').hide()

You could even go one step further and avoid the use of a cssClass:

$('td:nth-child(2)').hide()

Would hide the 2nd column.

answered Mar 4, 2011 at 21:45

Richard Slater

6,3884 gold badges57 silver badges82 bronze badges

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

3 Comments

Jacob Mattison Over a year ago

Still won't be able to hide all of the TDs that make up a given column this way.

Richard Slater Over a year ago

Indeed, I realised my mistake shortly after submitting the answer.

Jacob Mattison Over a year ago

Yep, and I like your second approach even better. Downvote changed to upvote.

zdyn · Accepted Answer · 2011-03-04 21:50:17Z

1

IDs are only supposed to be used uniquely, i.e. for one element only, therefore getElementById will only return 1 element, the first that matches. Try using a class instead and:

var elems = document.getElementsByClassName("someClass");
for(var i = 0; i < elems.length; i++)
    elems[i].style.display = "none";

EDIT: in jQuery mode on accident >:)

edited Mar 4, 2011 at 21:50

answered Mar 4, 2011 at 21:44

zdyn

2,1731 gold badge16 silver badges17 bronze badges

Comments

user52212 · Accepted Answer · 2011-03-04 21:44:07Z

0

I recently used jquery columnManager http://p.sohei.org/jquery-plugins/columnmanager/ to allow user to easily show/hide table columns and it worked very well.

answered Mar 4, 2011 at 21:44

user52212

6134 gold badges9 silver badges18 bronze badges

Collectives™ on Stack Overflow

Hiding HTML table columns with JavaScript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related