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

news/2024/7/7 18:36:34

今天帮别人写一个网页，发现：当用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 οnlοad="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 οnlοad="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可以起到对行进行分组的作用，当一次需要显示或隐藏多行时很有用。


http://www.niftyadmin.cn/n/2404693.html

相关文章

隐藏横向或纵向滚动条

隐藏横向或纵向滚动条

怎样隐藏横向滚动条&#xff1f; 在最近一个项目中&#xff0c;公司客户要求在1024*768分辨率下 隐藏横向导航条&#xff0c;找了网上多个方案均无法实现隐藏横向滚动条的问题. 因为只是隐藏横向滚动条&#xff0c;所以不能使用scrolling"no"的办法&#xff0c;因为…
阅读更多...
ASP.NET AJAX 与 FileUpload

ASP.NET AJAX 与 FileUpload

FileUpload放在updatepanel中,回调时发现上其属性hasfile为false。解决方案如下&#xff1a; 方案一、如果将scriptmanager的enablepartialrending设为false则可以正确上传&#xff0c;这个方法最简单&#xff0c;但是会有缺陷&#xff0c;就是在同一个页面上的多个UpdatePane…
阅读更多...
导出excel的四种方法

导出excel的四种方法

据我现在所知excel有四种方法&#xff1a;1.自己写的excel接口&#xff0c;客户端不需要装excel&#xff0c;见灵感之源的blog:http://www.cnblogs.com/unruledboy/archive/2004/07/07/22093.aspx 2.把web上的DataGrid直接导入到excelpublic void ExportToExcel(System.Web.UI…
阅读更多...
GridView 72般绝技,Javascript与asp.net 实现Ajax多文件无刷新上传,在ASP.NET中执行URL重写经典方案

GridView 72般绝技,Javascript与asp.net 实现Ajax多文件无刷新上传,在ASP.NET中执行URL重写经典方案

C#精髓 第四讲 GridView 72般绝技 http://blog.csdn.net/cngkqy/archive/2008/11/24/3360965.aspx Javascript与asp.net 实现Ajax多文件无刷新上传 http://blog.csdn.net/cngkqy/archive/2008/02/01/2076597.aspx 在ASP.NET中执行URL重写经典方案 http://blog.csdn.net/cngk…
阅读更多...
PHP手册翻译日记[3]

PHP手册翻译日记[3]

所有编译错误清除。我处理错误时顺便文件翻译了&#xff0c;保持与英文版的同步。Altair也处理了很多文件&#xff0c;但未同步。 向PHP文档组负责人Philip Olson申请将中文手册放回官方站点&#xff0c;但被告知还要等一些关键文件与英文版同步后才行。 Hello guys,Good job w…
阅读更多...
前端入门——快速理解H5+css中的旋转

前端入门——快速理解H5+css中的旋转

前端入门——快速理解H5css中的旋转 ​ 说到旋转&#xff0c;那么必然要确定两个条件&#xff0c;旋转原点 和 旋转方向。 ​ 旋转原点&#xff1a; 顾名思义&#xff0c;即旋转是绕着哪个点来进行旋转的 ​ 旋转方向&#xff1a; 即绕着哪个方向进行旋转的 ​ ​ 实现效果…
阅读更多...
对IP及IP段进行访问限制

对IP及IP段进行访问限制

本来是写了几个函数&#xff0c;IP黑名单是记到库里的&#xff0c;为了方便理解&#xff0c;改成了一个class把IP黑名单写了出来。 192.168.1.1 单个IP 192.168.1.* 这样代理 192.168.1.1-192.168.1-255 192.158.1.2-20 这样是代表192.158.1.2-192.158.1.20 也可以这样写 192.1…
阅读更多...
弹性盒中 flex详解及flex：1的用法解析

弹性盒中 flex详解及flex：1的用法解析

弹性盒中 flex详解及flex&#xff1a;1的用法解析 一、flex 在了解 flex&#xff1a;1 之前我们先了解一下flex的属性值有哪些&#xff0c;就如同background一样&#xff0c;有着backgournd-images、background-color、background-position等属性名一样&#xff0c; flex也有…
阅读更多...
最新文章

Copyright @ 2022~2023