繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > firefox TBODY 用js显示和隐藏时出现错位的解决方法
- Javascript
- javascript事件问题
- jquery tools 系列 scrollable学习
- Javascript中的var_dump函数实现代码
- javascript 获取select下拉列表值的代码
- JS 网页彩蛋 实现代码
- javascript 定义初始化数组函数
- Javascript 阻止浏览器默认操作的实现代码
- Javascript 检测、添加、移除样式(className)函数代码
- Javascript String.replace的妙用
- 用 Javascript 验证表单(form)中多选框(checkbox)值
- 用 Javascript 验证表单(form)中的单选(radio)值
- Javascript 获取滚动条位置等信息的函数
- 用Javascript 和 CSS 实现脚注（Footnote）效果
- 禁止JQuery中的load方法装载IE缓存中文件的方法
- jquery 简单导航实现代码
- JS 日期验证正则附asp日期格式化函数
- javascript 一些用法小结
- 关于javascript 回调函数中变量作用域的讨论
- 一个简单的JavaScript 日期计算算法
- javascript 基础简介 适合新手学习
Javascript 中的 firefox TBODY 用js显示和隐藏时出现错位的解决方法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 557 ::
收藏到网摘: n/a
今天帮别人写一个网页，发现：当用javascript动态设置tr.style.display = "block"显示某行时，使用IE浏览没有问题，但使用firefox浏览时该行被移到了其它行的后面，很是诧异。 看下面这个例子：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
它在firefox中显示时，“第一行”被显示在最后一行。
于是在处理好需要显示的行后，另写了一个函数，先记录需要显示的行，然后将所有行的style.display都设置为"none",最后再将需要显示的行依次显示出来。这样，IE和firefox的显示结果就一样了。
后来，我还是觉得这个方法很笨，就又潜心研究了一番，发现，只要将第二行和都三行都加上style="display:block"，显示也就正常了。见下面的代码：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
由此可见，firefox对是否设置style="display:block"是区别对待的，而IE作了适当的兼容处理。
结论和教训是：尽量使用标准做法，不要指望浏览器可以兼容。IE用多了就常常会忘记这点。
注：如果不使用tbody则没有这个问题。但tbody可以起到对行进行分组的作用，当一次需要显示或隐藏多行时很有用。
评论 (0) All
