使用Javascript隱藏/顯示錶列（修復所有瀏覽器？）

我有一個很多列的長桌，它看起來對用戶來說真的很難看。我想要做的是創建一個簡單的按鈕，作爲開關，打開和關閉一些列。使用Javascript隱藏/顯示錶列（修復所有瀏覽器？）

是一些列不需要

，所以我所做的就是一個類添加到每一個並不需要，如：....

現在，我想我可以做的是：

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），那也可以。

來源

2011-05-13 Brian

看到http://stackoverflow.com/questions/455958/hide-show-column-in-an-html-table – 2011-05-13 07:27:59

那麼jQuery.toggle()呢？

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

來源

2011-05-13 07:29:10

什麼downvoting這點？如果有一個輪子，爲什麼你想重新發明另一個？ – 2011-05-13 08:13:43

這是一個非常有效且有用的答案，尤其是因爲jQuery的主要賣點之一是彌補了這些_exact_瀏覽器實現的不一致性。 – peteorpeter 2011-05-13 13:32:43

謝謝，我很驚訝，因爲這是我答案的訊息。「怎麼樣......」就像「也許你不需要那個痛苦的人！」 :) – 2011-05-13 13:44:08

，你得到的錯誤是不是因爲IE不想要設置的顯示屬性，這是因爲該方法getElementsByClassName方法沒有在IE瀏覽器中實現。如果你想實現這個方法，你可以使用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();

來源

2011-05-13 07:54:44 wewals

使用Javascript隱藏/顯示錶列（修復所有瀏覽器？）

回答

相關問題