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

Javascript
JavaScript 解析Json字符串的性能比较分析代码
js 日期字符串截取分割成单个具体的日期(2009-12-30 13:28:29)
javascript 倒计时代码
javascript 语法基础 想学习js的朋友可以看看
javascript获取元素文本内容的通用函数
javascript 动态设置已知select的option的value值的代码
jquery 简单的图片展示效果
js textarea自动增高并隐藏滚动条
Javascript 中介者模式实例
textbox 在光标位置插入字符功能的js实现(兼容ie,firefox)
jQuery Attributes(属性)的使用(二、类篇)
Javascript document.referrer判断访客来源网址
[原创]javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
javascript获得光标所在的文本框(text/textarea)中的位置
event.srcElement 用法笔记e.target
javascript 导出数据到Excel(处理table中的元素)
javascript DOM操作之动态删除TABLE多行
Javascript在IE或Firefox下获取鼠标位置的代码
Javascript 多浏览器兼容性问题及解决方案
让div层随鼠标移动的实现代码 ie ff

No. « 250 251 252 253 »

技术文章搜索

关键字

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

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