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

Javascript
javascript function、指针及内置对象
Javascript 同时提交多个Web表单的方法
用jQuery简化JavaScript开发分析
Javascript静态分页(多个资料,静态自动分页)
JavaScript 调试器简介
JavaScript 判断浏览器类型及版本
javascript eval函数深入认识
一个写得较好的JavaScript日期挑选控件
JavaScript基本概念初级讲解论坛贴的学习记录
javascript web对话框与弹出窗口
input、button的不同type值在ajax提交表单时导致的陷阱
javascript 密码强弱度检测万能插件
javascript 特殊字符串
Javascript动态伸缩+淡出淡入
javascript URL锚点取值方法
jQuery Div中加载其他页面的实现代码
javascript 文档的编码问题解决
escape、encodeURI 和 encodeURIComponent 的区别
[推荐]javascript 面向对象技术基础教程
js 页面执行时间计算代码

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 372 ::
收藏到网摘: 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可以起到对行进行分组的作用,当一次需要显示或隐藏多行时很有用。