There has to be a better way. Hiding/Showing Columns

[dep]

Hello. I've run in to a bit of a muddy mess with my application here.

Firstly, please understand that this is a very big web application. There is a "tabbed" interface that allows one to switch from page to page... On each page, there are tables.

Each table has a "minimize/maximize" function that will resize the table and hide/unhide specific columns in the table...

Right now, the tables are constructed as HTML tables. The TD's that are to be hidden are given the class "hidden[tableName]" whatever the table name may be.

When the table is maximized, i execute the following function:


function changeVisibleByClass(element, className, display){
var allPageTags = new Array();

allPageTags=document.getElementsByTagName(element);

for (i=0; i<allPageTags.length; i++) {
if (allPageTags[i].className==className){
allPageTags[i].style.display=display;
}
}
}


This has gotten to be quite inefficient and slow because it loads all of the visible TDs in the HTML and then checks each one for its classtype, changing the visibility as necessary. This works fine for a small page, but as my tables grow, this is becoming horribly inefficient.

What would be a better way to accomplish this?

Best regards,
dep

[liorean]

Well, first of all, var allPageTags = new Array(); is entirely unnecessary since you overwrite it immediately.

Second, for (i=0; i<allPageTags.length; i++) {/.../} could be replaced with more efficient looping construct:
var
coll=document.getElementsByTagName(element),
i=0,
elm;
while(elm=coll.item(i++))
doSomethingWithElm;

Thirdly, a much more efficient way of doing this would be to change the actual css for all elements of that class, and let the CSS engine handle the displaying or hiding.

Fourth, if you don't want to do that (it can be complicated) you could simply create an array containing all elements that can be hidden, and one containing all elements that can be displayed. Then you just loop through the array of elements that can be displayed, turn their display on, and move them to the other array. And when you need to hide them, you just loop through the array of elements that can be hidden, turn their display off, and move them to the other array.

[dep]

Thirdly, a much more efficient way of doing this would be to change the actual css for all elements of that class, and let the CSS engine handle the displaying or hiding.


how can i find out how to do this?

dep

[glenngv]

http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

[dep]

Thank you :)