免费注册 | 登录 | 帮助
首 页
新闻中心
案例鉴赏
网站建设
软件开发
关于我们
服务中心
在线客服
联系我们
当前位置>>新闻中心 >> 行业资讯 >> firefox TBODY 用js显示和隐藏时出现错位的解决方法
firefox TBODY 用js显示和隐藏时出现错位的解决方法
[来源:原创] [作者:不详] [日期:08-12-17] [热度:]
         当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面。看下面这个例子:

<html>
<head>
<script type="text/javascript">
function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}
</script>
</head>
<body onload="javascript:body_load();">
<table>
<tbody id="tr1" style="display:none">
<tr>
<td>第一行</td>
</tr>
</tbody>
<tbody id="tr2">
<tr>
<td>第二行</td>
</tr>
</tbody>
<tbody id="tr3">
<tr>
<td>第三行</td>
</tr>
</tbody>
</table>
</body>
</html>
它在firefox中显示时,“第一行”被显示在最后一行。
于是在处理好需要显示的行后,另写了一个函数,先记录需要显示的行,然后将所有行的style.display都设置为"none",最后再将需要显示的行依次显示出来。这样,IE和firefox的显示结果就一样了。
后来,我还是觉得这个方法很笨,就又潜心研究了一番,发现,只要将第二行和都三行都加上style="display:block",显示也就正常了。见下面的代码:
<html>
<head>
<script type="text/javascript">
function body_load()
{
var obj = document.getElementById("tr1");
obj.style.display = "block";
}
</script>
</head>
<body onload="javascript:body_load();">
<table>
<tbody id="tr1" style="display:none">
<tr>
<td>第一行</td>
</tr>
</tbody>
<tbody id="tr2" style="display:block">
<tr>
<td>第二行</td>
</tr>
</tbody>
<tbody id="tr3" style="display:block">
<tr>
<td>第三行</td>
</tr>
</tbody>
</table>
</body>
</html>
由此可见,firefox对是否设置style="display:block"是区别对待的,而IE作了适当的兼容处理。
结论和教训是:尽量使用标准做法,不要指望浏览器可以兼容。IE用多了就常常会忘记这点。
注:如果不使用tbody则没有这个问题。但tbody可以起到对行进行分组的作用,当一次需要显示或隐藏多行时很有用。

相关文章
文章搜索
联系我们
服务热线:0755-28184706 传真:0755-28184542 邮箱:admin@tendynet.com 邮编:518131 公司地址:深圳市龙华镇梅坂大道 民乐工业园安居大厦
快速导航: 首 页 案例鉴赏 模板建站 网站建设 网络营销 新闻中心 关于我们 客户反馈 联系我们
服务热线:0755-28184706 传真:0755-28184542 技术支持:0755-28184694
公司地址:深圳市龙华镇梅坂大道民乐工业园A栋一楼 邮编:518131
资料邮箱:admin@tendynet.com [粤ICP备05080046号]