Question

有一个带有简单表格的HTML页面和要在其上显示/隐藏的js代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title</title>
    <script type="text/javascript">


    function showErrorSteps()
    {        
        var el = document.getElementById("t1");

        if(el.style.display=="none")
        {
            el.style.display="block";
        }
        else
        {
        el.style.display="none";
        }                                               
    }

    </script>
</head>
<body>

<br />
<span onclick="showErrorSteps()">[click]</span>
<br />
<br />

<table id="t1" border="1" width="100%" style="table-layout: fixed">
<tr>
    <td>s</td>
    <td>d</td>
    <td>a</td>
</tr>
</table>        
</body>
</html>

在Mozilla上发生的事情是，在您单击两次后（即使使用table-layout：fixed css），表格也会调整大小。 IE工作正常。

Answer 1

表格不应设置为display: block。表行和单元格也不应该。它们具有不同的显示值。我的建议？不要这样做。使用课程：

.hidden {
  display: none;
}

并动态添加并将其从表中删除，以避免在您显示的元素上设置正确的显示类型时出现问题。

编辑：澄清关于为什么这样做以及发生了什么的评论。试试这个：

<table>
<tr>
  <td>Cell 1</td>
  <td style="display: block;">Cell 2</td>
</tr>
</table

它会（或应该）搞砸你的桌面布局。为什么，因为<td>元素默认情况下display: table-cell不是block。表格是一样的。他们有display: table。

取消设置CSS属性是有问题的。

因此，您最好使用类来设置和取消设置属性。它更容易更改（该类驻留在CSS文件中而不是代码），避免了将值设置回正确的原始值等问题，并且通常提供更清晰的解决方案，尤其是在与jQuery等库一起使用时。在jQuery中，你可以这样做：

$("table").toggleClass("hidden");

完成。

或者，如果更合适，您可以使用addClass()和removeClass()。例如：

<input type="button" id="hide" value="Hide Table">
...
<table id="mytable">
...

和

$(function() {
  $("#hide").click(function() {
    if ($("#mytable").is(".hidden")) {
      $("#hide").val("Hide Table");
      $("#mytable").removeClass("hidden");
    } else {
      $("#hide").val("Show Table");
      $("#mytable").addClass("hidden");
    }
  });
});

你有一个强大，简洁和易于理解的解决方案（一旦你了解jQuery语法，这不会花那么长时间）。

直接与Javascript混淆2002年。： - ）

Answer 2

这不是您问题的直接答案，而是一个严肃的建议。我最近发现了JQuery的乐趣。所有这些东西都可以毫不费力地完成，并且有大量的在线示例和参考资料。

如果你现在还没有时间进入它，那么我肯定有人会在这里提供解决方案，但我会推荐任何除了最粗略的JavaScript DOM操作之外做任何事情的人来考虑JQuery（或类似的框架））。

JQuery提供与浏览器无关的Hide（），Show（）和Toggle（）方法。这是我最喜欢的references之一。

Answer 3

这可能是因为您将style.display设置为“block”。尝试将其设置为“”。您还应该使用CSS设置表格宽度。（宽度：100％;）

隐藏整个表会调整它的大小

3 个答案: