Loading......
Jun
3
内容载入中...
用display隐藏Tabale的tr行在Firefox中问题的解决办法
作者：quke.cn   |   分类：HTML/CSS

在Firefox和Google的浏览器中用display隐藏Table的tr行中无法正常显示的问题，例如：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <HTML> 
  3.  <HEAD> 
  4.   <TITLE> New Document </TITLE> 
  5.    <SCRIPT LANGUAGE="JavaScript"> 
  6.   <!--  
  7.   var i =1;  
  8.        function change()  
  9.        {  
  10.             
  11.            var dd = 'tr'+i;  
  12.               document.all(dd).style.display="none";  
  13.           i ++;  
  14.        }  
  15.    var j =1 ;  
  16.        function changeadd()  
  17.        {  
  18.             
  19.            var dd = 'tr'+ j ;  
  20.               document.all(dd).style.display="block";  
  21.            j ++;  
  22.        }  
  23.   //--> 
  24.   </SCRIPT> 
  25.  </HEAD> 
  26.    
  27.  <BODY> 
  28.   <TABLE border="1"> 
  29.   <TR id ="tr1"> 
  30.        <TD>w</TD> 
  31.        <TD>w</TD> 
  32.        <TD>w</TD> 
  33.        <TD>w</TD> 
  34.        <TD>w</TD> 
  35.   </TR> 
  36.   <TR id ="tr2"> 
  37.        <TD>s</TD> 
  38.        <TD>d</TD> 
  39.        <TD>d</TD> 
  40.        <TD>d</TD> 
  41.        <TD>d</TD> 
  42.   </TR> 
  43.   <TR id ="tr3"> 
  44.        <TD>333</TD> 
  45.        <TD>33</TD> 
  46.        <TD>3</TD> 
  47.        <TD>3</TD> 
  48.        <TD>3</TD> 
  49.   </TR> 
  50.   <TR id ="tr4"> 
  51.        <TD>55</TD> 
  52.        <TD>5</TD> 
  53.        <TD>5</TD> 
  54.        <TD>5</TD> 
  55.        <TD>555</TD> 
  56.   </TR> 
  57.   </TABLE> 
  58. <BUTTON onclick="change();"> 去除一行</BUTTON> 
  59. <BUTTON onclick="changeadd();">  增加一行 </BUTTON> 
  60.  </BODY> 
  61. </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="";
固定链接：http://www.quke.cn/log-303.html 2009-06-3 12:49 AM   |   浏览：1603   |   评论：0
内容载入中...
  姓名（必填）
  邮箱（选填）
  主页（选填）
内容载入中...