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

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

2 个答案: