firefox TBODY 用js顯示和隱藏時(shí)出現(xiàn)錯(cuò)位的解決方法
更新時(shí)間：2008年12月17日 01:23:25 作者：
今天幫別人寫一個(gè)網(wǎng)頁(yè)，發(fā)現(xiàn)：當(dāng)用javascript動(dòng)態(tài)設(shè)置tr.style.display = "block"顯示某行時(shí)，使用IE瀏覽沒有問題，但使用firefox瀏覽時(shí)該行被移到了其它行的后面，很是詫異。
看下面這個(gè)例子：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
它在firefox中顯示時(shí)，“第一行”被顯示在最后一行。
于是在處理好需要顯示的行后，另寫了一個(gè)函數(shù)，先記錄需要顯示的行，然后將所有行的style.display都設(shè)置為"none",最后再將需要顯示的行依次顯示出來(lái)。這樣，IE和firefox的顯示結(jié)果就一樣了。
后來(lái)，我還是覺得這個(gè)方法很笨，就又潛心研究了一番，發(fā)現(xiàn)，只要將第二行和都三行都加上style="display:block"，顯示也就正常了。見下面的代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
由此可見，firefox對(duì)是否設(shè)置style="display:block"是區(qū)別對(duì)待的，而IE作了適當(dāng)?shù)募嫒萏幚怼?
結(jié)論和教訓(xùn)是：盡量使用標(biāo)準(zhǔn)做法，不要指望瀏覽器可以兼容。IE用多了就常常會(huì)忘記這點(diǎn)。
注：如果不使用tbody則沒有這個(gè)問題。但tbody可以起到對(duì)行進(jìn)行分組的作用，當(dāng)一次需要顯示或隱藏多行時(shí)很有用。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
它在firefox中顯示時(shí)，“第一行”被顯示在最后一行。
于是在處理好需要顯示的行后，另寫了一個(gè)函數(shù)，先記錄需要顯示的行，然后將所有行的style.display都設(shè)置為"none",最后再將需要顯示的行依次顯示出來(lái)。這樣，IE和firefox的顯示結(jié)果就一樣了。
后來(lái)，我還是覺得這個(gè)方法很笨，就又潛心研究了一番，發(fā)現(xiàn)，只要將第二行和都三行都加上style="display:block"，顯示也就正常了。見下面的代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
由此可見，firefox對(duì)是否設(shè)置style="display:block"是區(qū)別對(duì)待的，而IE作了適當(dāng)?shù)募嫒萏幚怼?
結(jié)論和教訓(xùn)是：盡量使用標(biāo)準(zhǔn)做法，不要指望瀏覽器可以兼容。IE用多了就常常會(huì)忘記這點(diǎn)。
注：如果不使用tbody則沒有這個(gè)問題。但tbody可以起到對(duì)行進(jìn)行分組的作用，當(dāng)一次需要顯示或隱藏多行時(shí)很有用。
相關(guān)文章
Javascript中arguments用法實(shí)例分析
這篇文章主要介紹了Javascript中arguments用法,實(shí)例分析了javascript利用arguments實(shí)現(xiàn)模擬重載功能,需要的朋友可以參考下2015-06-06
使用uni-app框架開發(fā)微信小程序,可以使用高德地圖開發(fā)地圖選點(diǎn)、搜索位置、定位、獲取詳細(xì)的地址信息、碼值等信息,下面這篇文章主要給大家介紹了關(guān)于uniapp使用高德地圖的超詳細(xì)步驟,需要的朋友可以參考下2022-12-12
wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn)
這篇文章主要介紹了wavesurfer.js繪制音頻波形圖的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
很多語(yǔ)言中都有塊級(jí)作用域，但JS沒有，它使用var聲明變量，以function來(lái)劃分作用域，大括號(hào)“{}” 卻限定不了var的作用域，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之塊級(jí)作用域的相關(guān)資料，需要的朋友可以參考下。2017-10-10
鼠標(biāo)懸浮在樹組件節(jié)點(diǎn)上展示當(dāng)前節(jié)點(diǎn)名稱的三種實(shí)現(xiàn)方式
這篇文章主要介紹了鼠標(biāo)懸浮在樹組件節(jié)點(diǎn)上展示當(dāng)前節(jié)點(diǎn)名稱的三種實(shí)現(xiàn)方式,第一種是使用css樣式設(shè)置,第二種在checkBox綁定,第三種使用tooltip,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12
javascript 函數(shù)式編程...2007-08-08
javascript實(shí)現(xiàn)粘貼qq截圖功能（clipboardData）
這篇文章主要介紹了javascript實(shí)現(xiàn)粘貼qq截圖功能，利用clipboardData在網(wǎng)頁(yè)中實(shí)現(xiàn)截屏粘貼的功能，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了js加入收藏夾代碼并兼容ie/ff/op,需要的朋友可以參考下2014-05-05
js的新生代垃圾回收知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理的是關(guān)于js的新生代垃圾回收的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以參考學(xué)習(xí)下。2019-08-08
在網(wǎng)上找了好多隨機(jī)產(chǎn)生的密碼的代碼，沒一個(gè)好用的，所以就隨便寫了一個(gè)2010-08-08