Firefox下隐藏表格行不能使用block

 

 

如下一段代码，在IE下能正常执行，但在Firefox下执行却有点不正常：

HTML代码

<script language="javascript"> function TestBlack(TagName){ var obj = document.getElementById(TagName); if(obj.style.display=="block"){ obj.style.display = "none"; }else{ obj.style.display = "block"; } } </script> <table width="760" border="0" cellspacing="0" cellpadding="0"> <tr onclick="TestBlack('divb');"> <td width="760" height="20" bgcolor="#00CCFF">Click Me!</td> </tr> <tr id="divb" style="display:block;"> <td width="760" height="60" bgcolor="#9966FF"></td> </tr> </table> Mark

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

有网友说可能是CSS对表格的处理能力比较弱，个人认为不然，因为上边代码在IE却是能正常执行的；也有网友说是因为在Firefox中执行"display:none;"后没有回收"display:block;"开辟的页面空间，下次再执行"display:block;"又会在页面上重新创建显示空间，这种解释也站不住脚，如下代码当在div上使用时Firefox执行是正常的：

HTML代码

<script language="javascript"> function TestBlack(TagName){ var obj = document.getElementById(TagName); if(obj.style.display=="block"){ obj.style.display = "none"; }else{ obj.style.display = "block"; } } </script> <div style="background-color:#00CCFF; width:760px; height:20px;" onclick="TestBlack('diva');">Click Me!</div> <div id="diva" style="width:760px; height:60px; background-color:#9966FF; display:block;"></div> Mark

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

目前为止还没找到一个可信的原因，但那并不意味着在在Firefox下就无法动态的显示/隐藏表格行，有细心的网友发现使用'style.display="";'代替'style.display="block";'就能正常执行了：

HTML代码

<script language="javascript"> function TestBlack(TagName){ var obj = document.getElementById(TagName); if(obj.style.display==""){ obj.style.display = "none"; }else{ obj.style.display = ""; } } </script> <table width="760" border="0" cellspacing="0" cellpadding="0"> <tr onclick="TestBlack('divc');"> <td width="760" height="20" bgcolor="#00CCFF">Click Me!</td> </tr> <tr id="divc"> <td width="760" height="60" bgcolor="#9966FF"></td> </tr> </table> Mark

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]