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

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>

Run Code Online (Sandbox Code Playgroud)

会发生什么事情是在Mozilla上,在您单击两次后(即使使用table-layout:fixed css),表格也会调整大小.IE运行正常.

Answer 1

cle*_*tus 6

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

.hidden {
  display: none;
}

Run Code Online (Sandbox Code Playgroud)

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

完成.

或者你可以使用addClass(),removeClass()如果这更合适.例如:

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

Run Code Online (Sandbox Code Playgroud)

和

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

Run Code Online (Sandbox Code Playgroud)

而且你有一个健壮,简洁和易于理解的解决方案(一旦你了解jQuery语法,这不需要那么长时间).

用Javascript直接搞乱是2002年.:-)

归档时间：	16 年，6 月前
查看次数：	664 次
最近记录：	8 年，4 月前