HTML隱藏的td占用了IE6中的空白區域

Question

我正在開發一個JavaScript腳本，它將隱藏並在我的button單擊上顯示td 。

當我試圖隱藏td比IE6隱藏td並在那里放置一些空格但是我的代碼正在處理所有最新的morder瀏覽器甚至latest IE 。

我的代碼：

data = getElementsByClassName("data", "td", myElement);
for (i = 0; i < data.length; i++) {
    td = data[i];                        
    tr = td.parentNode;
    for (j = 0; j < tr.childNodes.length; j++) {        
        tr.childNodes[j].style.display = "none";
    }
}

在這里，我編寫了自己的getElementsByClassName方法，因為IE6不支持它，我想要IE6支持。 上面的代碼可以在除IE6瀏覽器之外的所有其他瀏覽器中找到。

在IE6中我的表看起來像這樣：

在其他瀏覽器中

謝謝您的幫助。

Answer 1

嘗試折疊它們：

tr.childNodes[j].style.visibility = "collapse";
tr.childNodes[j].style.display = "none";

如果您還設置了display-property，那也不會有什么壞處。

---

如果您以后想要重新激活單元格，則可以將其反轉：

tr.childNodes[j].style.visibility = "visible";
tr.childNodes[j].style.display = "table-cell";

---

如果這不能用於任何原因，我們應該找出為什么還有差距。
你能使用IE-Inspector / Dev-Tools（F12）找出差距來自哪里？

我可以想象填充/邊距/邊框屬性是這里的問題，
或者這是傳說中的hasLayout-issue的問題 。

Answer 2

IE6獲取文本節點和注釋節點。 也許你應該試試這個：

var doc = document;
function getElementsByClassName(className){
  if(doc.getElementsByClassName){
    return doc.getElementsByClassName(className);
  }
  var r = [], all = doc.getElementsByTagName('*');
  for(var i=0,l=all.length; i<l; i++){
    var ai = all[i];
    if(ai.className === className){
      r.push(ai);
    }
  }
  return r;
}

var data = getElementsByClassName('data');
for(var i=0,l=data.length; i<l; i++){
  var kids = data[i].parentNode.childNodes;
  for(var n=0,q=kids.length; n<q; n++){
    var kid = kids[n];
    if(kid.nodeType !== 1){
      kid.style.display = 'none';
    }
  }
}