Question

我有一个javascript函数可以删除一些表行。我只想隐藏它们，因为我想稍后再展示它们。

我使用 style.display = none ，这似乎有用。

tr.style.display = 'none';

当我想再次展示时，我只需要打电话：

tr.style.display = '';

我的表格行再次显示。工作正常。

然而，在Internet Explorer中，有一个令人讨厌的空白区域，大约1-2像素高，这是以前的行。 Chrome完全隐藏了这一行。

（我无法在JSFiddle中显示，因为IE在jsfiddle中不起作用）。

任何人都知道这是为什么？

Answer 1

大声笑你会踢自己，只是在IE8上测试了这个，我得到了同样的东西，弄清楚原因，然后我想起了老派的HTML ..把它添加到你的桌子。

 <table cellpadding="0" cellspacing="0" border="0">

我也获得了1px空间，然后添加了然后消失了。另外，尝试在样式表中使用*来删除填充和边距。然后添加类来控制表。这是我测试过的代码。

<html><head><title></title>
    <style>
        * { padding:0; margin:0; }
        .visiblerow { background:#ccc; }
        .visiblecell { padding: 10px; margin: 10px; }
        .hiddenrow { background:#000; display: none; }
        .hiddencell { padding: 0px; margin: 0px; }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0" border="0">
        <tr class="visiblerow">
            <td class="visiblecell">test</td>
        </tr>
        <tr class="hiddenrow">
            <td class="hiddencell">hide me</td>
        </tr>
        <tr class="visiblerow">
            <td class="visiblecell">test</td>
        </tr>
    </table>
</body>
</html>

从IE8中的表格标签中删除cellpadding，间距，边框，您将看到1px空格返回。现在还定义了类，你可以创建一个很好的javascript函数，它也可以在行上切换类。

tr.style.display ='none'留下令人讨厌的空间

1 个答案: