Hide/Show Table Columns with Javascript (fix for all browsers?)

Question

I have a long table with many many columns and it looks really ugly for the users. What I wanted to do was create a simple button that would act as a switch, to turn on and off some of the columns.

Some of the columns are not needed, so what I did was add a class to every that wasn't needed, eg: ....

Now, what I thought I could do was this:

var hidden = 1;
     function toggleTable(){
      element_array = document.getElementsByClassName('disabled');
      for(i = 0; i < element_array.length; i++){
      if(hidden == 1){
        element_array[i].style.display = 'none';
      }else{
        element_array[i].style.display = '';
      }
      }

      if(hidden == 1) hidden = 0;
      else hidden = 1;
     }

This works for the most part in Firefox, but some quick tests in IE(7+8) and I get the following: Message: Object doesn't support this property or method

Obviously indicating that IE doesn't want to let me simply change "display: none;" for something like table columns/rows.

I can't think of any workarounds. Ideally I'd like a fully cross-compatible solution to toggling the display of certain table columns,but if it's not compatible in the older browsers (eg: IE6) then that would also be OK.

see http://stackoverflow.com/questions/455958/hide-show-column-in-an-html-table — Adam Straughan, May 13 '11 at 07:27

score 1 · Answer 1 · answered May 13 '11 at 07:54

The error that you're getting is not because IE doesn't want to set the display property, it's because the getElementsByClassName method isn't implemented in IE. If you want an implementation of that methods you can use this one which was written by Dustin Diaz.

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

Then you would re-write your method as follows.

var hidden = 1;

function toggleTable(){
    var element_array = getElementsByClass('foo');
    for(i = 0; i < element_array.length; i++){
        if(hidden == 1){
            element_array[i].style.display = 'none';
        }else{
            element_array[i].style.display = '';
        }
    }

    if(hidden == 1) hidden = 0;
    else hidden = 1;
}
toggleTable();

score 0 · Answer 2 · answered May 13 '11 at 07:29

0

And what about jQuery.toggle()?

$(".disabled").toggle();

answered May 13 '11 at 07:29

Matías Fidemraizer

63,804
18
124
206

1

What's the point of downvoting that? If there's a wheel, why you would want to re-invent another one? – Matías Fidemraizer May 13 '11 at 08:13
This is a perfectly valid and useful answer, especially because one of jQuery's primary selling points is bridging these _exact_ browser implementation inconsistencies. – peteorpeter May 13 '11 at 13:32
Thanks, I was very surprised because this is the message of my answer. "What about..." like "maybe you don't need that pain man!" :) – Matías Fidemraizer May 13 '11 at 13:44
Maybe if the OP had specified they _can't_ use jQuery for some reason, this would be a bad answer, but in this day and age, if you _can_ use jQuery for this type of thing, you really should seriously consider it. – peteorpeter May 13 '11 at 14:03

Hide/Show Table Columns with Javascript (fix for all browsers?)

2 Answers2