使用 Javascript 隐藏/显示表列（修复所有浏览器？）

Question

我有一个长表，有很多列，对于用户来说它看起来真的很难看。我想做的是创建一个简单的按钮，充​​当开关，打开和关闭某些列。

有些列是不需要的，所以我所做的就是为每个不需要的列添加一个类，例如： ....

现在，我认为我可以做的是：

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;
     }

这在 Firefox 中大部分有效，但在 IE(7+8) 中进行一些快速测试，我得到以下结果： 消息：对象不支持此属性或方法

显然表明 IE 不想让我简单地更改“display：none;”对于诸如表列/行之类的内容。

我想不出任何解决方法。理想情况下，我想要一个完全交叉兼容的解决方案来切换某些表列的显示，但如果它在旧版浏览器（例如：IE6）中不兼容，那么也可以。

Answer 1

您收到的错误不是因为 IE 不想设置显示属性，而是因为 IE 中未实现 getElementsByClassName 方法。如果您想要该方法的实现，您可以使用达斯汀·迪亚兹 (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;
}

然后您将按如下方式重写您的方法。

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();

Answer 2

那么 jQuery.toggle() 又如何呢？

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