Hiding HTML table columns with JavaScript

I want to hide certain columns 开发者_JAVA技巧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.

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.

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 >:)

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.