TBODY在firefox下用js显示和隐藏时出现错位的解决方法

80酷酷网    80kuku.com

  firefox|js|解决|显示|tbody

今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异。看下面这个例子:

<html>
<head>
    <script type="text/javascript">
    function body_load()
    {
        var obj = document.getElementById("tr1");
        obj.style.display = "block";
    }
    </script>
</head>
<body >
    <table>
        <tbody id="tr1" >        <tr>
            <td>第一行</td>
        </tr>
        </tbody>
        <tbody id="tr2">
        <tr>
            <td>第二行</td>
        </tr>
        </tbody>        
        <tbody id="tr3">
        <tr>
            <td>第三行</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

它在firefox中显示时,“第一行”被显示在最后一行。

于是在处理好需要显示的行后,另写了一个函数,先记录需要显示的行,然后将所有行的style.display都设置为"none",最后再将需要显示的行依次显示出来。这样,IE和firefox的显示结果就一样了。

后来,我还是觉得这个方法很笨,就又潜心研究了一番,发现,只要将第二行和都三行都加上><html>
<head>
    <script type="text/javascript">
    function body_load()
    {
        var obj = document.getElementById("tr1");
        obj.style.display = "block";
    }
    </script>
</head>
<body >
    <table>
        <tbody id="tr1" >        <tr>
            <td>第一行</td>
        </tr>
        </tbody>
        <tbody id="tr2" >        <tr>
            <td>第二行</td>
        </tr>
        </tbody>        
        <tbody id="tr3" >        <tr>
            <td>第三行</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

由此可见,firefox对是否设置>结论和教训是:尽量使用标准做法,不要指望浏览器可以兼容。IE用多了就常常会忘记这点。

注:如果不使用tbody则没有这个问题。但tbody可以起到对行进行分组的作用,当一次需要显示或隐藏多行时很有用。

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: