Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

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

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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:
    Code:
        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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean
    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

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •