title: Hide/Show Table Columns with Javascript (fix for all browsers?)
body: <p>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.</p>
  
  <p>Some of the columns are not needed, so what I did was add a class to every  that wasn't needed, eg: ....</p>
  
  <p>Now, what I thought I could do was this:</p>
  
  <pre><code>var hidden = 1;
       function toggleTable(){
        element_array = document.getElementsByClassName('disabled');
        for(i = 0; i &lt; 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;
       }
  </code></pre>
  
  <p>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</p>
  
  <p>Obviously indicating that IE doesn't want to let me simply change "display: none;" for something like table columns/rows.</p>
  
  <p>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.</p>