firefox TBODY 用js顯示和隱藏時(shí)出現(xiàn)錯(cuò)位的解決方法
更新時(shí)間：2008年12月17日 01:23:25 作者：
今天幫別人寫一個(gè)網(wǎng)頁，發(fā)現(xiàn)：當(dāng)用javascript動(dòng)態(tài)設(shè)置tr.style.display = "block"顯示某行時(shí)，使用IE瀏覽沒有問題，但使用firefox瀏覽時(shí)該行被移到了其它行的后面，很是詫異。
看下面這個(gè)例子：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
它在firefox中顯示時(shí)，“第一行”被顯示在最后一行。
于是在處理好需要顯示的行后，另寫了一個(gè)函數(shù)，先記錄需要顯示的行，然后將所有行的style.display都設(shè)置為"none",最后再將需要顯示的行依次顯示出來。這樣，IE和firefox的顯示結(jié)果就一樣了。
后來，我還是覺得這個(gè)方法很笨，就又潛心研究了一番，發(fā)現(xiàn)，只要將第二行和都三行都加上style="display:block"，顯示也就正常了。見下面的代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
由此可見，firefox對是否設(shè)置style="display:block"是區(qū)別對待的，而IE作了適當(dāng)?shù)募嫒萏幚怼?
結(jié)論和教訓(xùn)是：盡量使用標(biāo)準(zhǔn)做法，不要指望瀏覽器可以兼容。IE用多了就常常會忘記這點(diǎn)。
注：如果不使用tbody則沒有這個(gè)問題。但tbody可以起到對行進(jìn)行分組的作用，當(dāng)一次需要顯示或隱藏多行時(shí)很有用。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
它在firefox中顯示時(shí)，“第一行”被顯示在最后一行。
于是在處理好需要顯示的行后，另寫了一個(gè)函數(shù)，先記錄需要顯示的行，然后將所有行的style.display都設(shè)置為"none",最后再將需要顯示的行依次顯示出來。這樣，IE和firefox的顯示結(jié)果就一樣了。
后來，我還是覺得這個(gè)方法很笨，就又潛心研究了一番，發(fā)現(xiàn)，只要將第二行和都三行都加上style="display:block"，顯示也就正常了。見下面的代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
由此可見，firefox對是否設(shè)置style="display:block"是區(qū)別對待的，而IE作了適當(dāng)?shù)募嫒萏幚怼?
結(jié)論和教訓(xùn)是：盡量使用標(biāo)準(zhǔn)做法，不要指望瀏覽器可以兼容。IE用多了就常常會忘記這點(diǎn)。
注：如果不使用tbody則沒有這個(gè)問題。但tbody可以起到對行進(jìn)行分組的作用，當(dāng)一次需要顯示或隱藏多行時(shí)很有用。
相關(guān)文章
微信小程序點(diǎn)擊滾動(dòng)到指定位置的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序點(diǎn)擊滾動(dòng)到指定位置的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
smartupload實(shí)現(xiàn)文件上傳時(shí)獲取表單數(shù)據(jù)(推薦)
這篇文章主要介紹了smartupload實(shí)現(xiàn)文件上傳時(shí)獲取表單數(shù)據(jù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
Javascript獲取background屬性中url的值
Javascript獲取CSS中屬性值方法有很多，今天工作的時(shí)候遇到了一個(gè)問題是需要利用Javascript獲取css中background-img屬性url的值，通過查閱網(wǎng)站的資料找到了解決方法，現(xiàn)在將方法分享給大家，有需要的朋友們們可以參考借鑒，下面來一起看看吧。2016-10-10
Javascript中string轉(zhuǎn)date示例代碼
string轉(zhuǎn)date的方法有很多，在接下來為大家介紹下Javascript中是如何做到的，感性取的朋友不要錯(cuò)過2013-11-11
js獲取html頁面代碼中圖片地址的實(shí)現(xiàn)代碼
這篇文章主要介紹了js獲取html代碼中圖片地址的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03
javascript md5加密代碼，和asp、php的加密有一定的區(qū)別2008-09-09
JavaScript中this關(guān)鍵詞的使用技巧、工作原理以及注意事項(xiàng)
在JavaScript中，this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨?，this 還是隨處可用的。這篇文章介紹了this 的工作原理，它會造成什么樣的問題以及this 的相關(guān)例子。2014-05-05
js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)帶緩沖效果的仿QQ面板折疊菜單代碼,通過JavaScript定時(shí)函數(shù)遞歸調(diào)用實(shí)現(xiàn)折疊菜單的緩沖效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
此文為計(jì)算新浪Weibo的消息長度的方法. 就是在發(fā)言的時(shí)候還可以輸入多少字，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要為大家詳細(xì)介紹了TypeScript中字符串的常用操作，例如substring、indexOf、slice、replace等，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08