用JavaScript隐藏HTML表列

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.

Answer 1

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.

Answer 2

IDs are only supposed to be used uniquely, ie 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 >:)

Answer 3

我最近使用了jquery columnManager http://p.sohei.org/jquery-plugins/columnmanager/来允许用户轻松显示/隐藏表列，并且效果很好。