您的位置:首页 > 其它

用display隐藏Tabale的tr行 在Firefox中问题的解决办法

2014-11-20 14:24 169 查看
HTML文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var i =1;

function change()

{

var dd = 'tr'+i;

document.all(dd).style.display="none";

i ++;

}

var j =1 ;

function changeadd()

{

var dd = 'tr'+ j ;

document.all(dd).style.display="block";

j ++;

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<TABLE border="1">

<TR id ="tr1">

<TD>w</TD>

<TD>w</TD>

<TD>w</TD>

<TD>w</TD>

<TD>w</TD>

</TR>

<TR id ="tr2">

<TD>s</TD>

<TD>d</TD>

<TD>d</TD>

<TD>d</TD>

<TD>d</TD>

</TR>

<TR id ="tr3">

<TD>333</TD>

<TD>33</TD>

<TD>3</TD>

<TD>3</TD>

<TD>3</TD>

</TR>

<TR id ="tr4">

<TD>55</TD>

<TD>5</TD>

<TD>5</TD>

<TD>5</TD>

<TD>555</TD>

</TR>

</TABLE>

<BUTTON onclick="change();"> 去除一行</BUTTON>

<BUTTON onclick="changeadd();"> 增加一行 </BUTTON>

</BODY>

</HTML>

以上代码在ie中正常,但是在FireFox和Safari中就会出错。

问题:

在Firefox中执行后"display:none;"没有回收"display:block;"开辟的页面空间,

下次再执行"display:block;"又会在页面上重新创建显示空间。

原因:

The reason it "appears" to work with IE is probably because IE is

error-correcting the display property for you.As others have implied,

IE has no concept of the table-row value. In fact,Microsoft's documentation

(<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp>)

clearly states that all block-like elements (with a few exceptions) have

'block' as their display value, contrary to specification.

解决:

将代码

style.display="block";

修改为

style.display="";
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: