Javascript 隐藏整个表会调整其大小_Javascript_Html_Firefox

Javascript 隐藏整个表会调整其大小

javascript html firefox

Javascript 隐藏整个表会调整其大小,javascript,html,firefox,Javascript,Html,Firefox,有一个带有简单表格和js代码的HTML页面，可以在上面显示/隐藏： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title</title> <script type="text/javascript"> function showErrorSteps() { var el = document.ge

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

<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>


标题
函数步骤（）
{        
var el=document.getElementById（“t1”）；
如果（el.style.display==“无”）
{
el.style.display=“块”；
}
其他的
{
el.style.display=“无”；
}                                               
}


[点击]




s
D
A.

在Mozilla上，单击两次后，表的大小就会调整（即使使用表布局：fixed css）。IE工作正常。

表格不应设置为

display:block

。表行和单元格也不应该这样。它们具有不同的显示值。我的建议？不要这样做。使用一个类：

.hidden {
  display: none;
}

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

编辑：澄清为什么这样做以及发生了什么。试试这个：

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

完成了

或者您可以使用

addClass（）

和

removeClass（）

，如果这更合适的话。例如：

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

在这里，您有一个健壮、简洁且易于理解的解决方案（只要您了解jQuery语法，这不会花那么长时间）

直接与Javascript混为一谈真是太糟糕了。：-）

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

这不是对你问题的直接回答，而是一个严肃的建议。我最近发现了生活的乐趣。所有这类事情都可以毫不费力地完成，网上有大量的例子和参考资料

如果你现在没有时间进入它，那么我确信有人会提供一个解决方案，但是我建议任何人在最粗略的JavaScript DOM操作之外做任何事情来考虑jQuery（或者类似的框架）。

JQuery提供了独立于浏览器的Hide（）、Show（）和Toggle（）方法。这是我最喜欢的一个。

这页有DOCTYPE吗？如果不是，为什么xhtml名称空间？表布局：修复是IE的事情，而不是standard@RoBorg-我对IE的非标准实现非常满意；我仍然使用Mozilla:）@Anthony。。。好的，虽然我必须承认我不明白它为什么会起作用，但这是有效的。@cletus:表的默认显示值是多少，不是Block.Simple。因为类的显示将是无的，而没有类的显示将是按元素默认的。没有坚持。我一直告诉人们阶级操纵比风格操纵好，但他们会听吗；）谢谢，我会调查的。我实际上在一个.net win forms项目中工作，所以我不会真正与html交互，除非我想做一些奇特的报告。

<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");
    }
  });
});