HTML隐藏的td占用了IE6中的空白区域

Question

我正在开发一个隐藏的JavaScript脚本，并在td点击时显示button。

当我试图隐藏td而不是IE6隐藏td并在那里放置一些空格但是我的代码正在处理所有最新的浏览器甚至是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';
    }
  }
}