TBODY在firefox下用js顯示和隱藏時出現錯位的解決方案

來源:互聯網
上載者:User
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" style="display:none">
        <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的顯示結果就一樣了。

後來,我還是覺得這個方法很笨,就又潛心研究了一番,發現,只要將第二行和都三行都加上style="display:block",顯示也就正常了。見下面的代碼:
<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" style="display:none">
        <tr>
            <td>第一行</td>
        </tr>
        </tbody>
        <tbody id="tr2" style="display:block">
        <tr>
            <td>第二行</td>
        </tr>
        </tbody>        
        <tbody id="tr3" style="display:block">
        <tr>
            <td>第三行</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

由此可見,firefox對是否設定style="display:block"是區別對待的,而IE作了適當的相容處理。
結論和教訓是:盡量使用標準做法,不要指望瀏覽器可以相容。IE用多了就常常會忘記這點。

註:如果不使用tbody則沒有這個問題。但tbody可以起到對行進行分組的作用,當一次需要顯示或隱藏多行時很有用。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。