木子屋 Dnawo's BLOG

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

👤 dnawo 📅 2008-02-24 👁 7565 👍 0 💬 0 🔄 来源:本站原创
如下一段代码,在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

有网友说可能是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

目前为止还没找到一个可信的原因,但那并不意味着在在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

评论(0)

暂无评论。

计算题
评论需审核通过后显示
← 上一篇 站长网拖拽效果完整Js 下一篇 → 做网络必须掌握的83句话