当前位置: 首页 > 图文教程 > 网络编程 > Javascript > firefox TBODY 用js显示和隐藏时出现错位的解决方法

Javascript
javascript radio 联动效果
兼容FireFox 的 js 日历 支持时间的获取
小型js框架veryide.librar源代码
js 颜色选择器(兼容firefox)
Iframe thickbox2.0使用的方法
JavaScript RegExp方法获取地址栏参数(面向对象)
javascript prototype 原型链
动态添加js事件实现代码
IE6、IE7、Firefox javascript 无提示关闭窗口的代码
JavaScript 事件属性绑定带参数的函数
InnerHtml和InnerText的区别分析
javascript radio值获取代码
用JavaScript编写COM组件的步骤
javascript 避免闭包引发的问题
js no-repeat写法 背景不重复
javascript 回车键后跳到下一控件
javascript IE7 浏览器本地图片预览
javascript attachEvent和addEventListener使用方法
JavaScript 脚本将当地时间转换成其它时区
javascript 装载iframe子页面,自适应高度

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 391 ::
收藏到网摘: n/a

今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异。 看下面这个例子:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

它在firefox中显示时,“第一行”被显示在最后一行。
于是在处理好需要显示的行后,另写了一个函数,先记录需要显示的行,然后将所有行的style.display都设置为"none",最后再将需要显示的行依次显示出来。这样,IE和firefox的显示结果就一样了。
后来,我还是觉得这个方法很笨,就又潜心研究了一番,发现,只要将第二行和都三行都加上style="display:block",显示也就正常了。见下面的代码:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

由此可见,firefox对是否设置style="display:block"是区别对待的,而IE作了适当的兼容处理。
结论和教训是:尽量使用标准做法,不要指望浏览器可以兼容。IE用多了就常常会忘记这点。
注:如果不使用tbody则没有这个问题。但tbody可以起到对行进行分组的作用,当一次需要显示或隐藏多行时很有用。