table与div互相嵌套注意

最新推荐文章于 2022-08-26 10:02:37 发布

weixin_30415801

最新推荐文章于 2022-08-26 10:02:37 发布

阅读量224

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sanxinglan/p/3342189.html

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"> 
    <title>Untitled Document</title> 
    <script language="JavaScript" src="js/prototype.js"></script> 
    <script language="JavaScript"> 
      function changeStyle(){ 
        if(document.getElementById('test').style.display=='none'){ 
          alert("show"); 
          document.getElementById('test').style.display='block' 
        }else{ 
          alert("hide"); 
          document.getElementById('test').style.display='none' 
        } 
      } 
    </script> 
  </head> 
  <body> 
    <input value="测试" type="button" onclick="changeStyle()"> 
    <select type="button" value="测试" onchange="changeStyle();"> 
      <option>1</option> 
      <option>2</option> 
    </select> 
    <table> 
      <tr> 
      <td><!--在table中嵌套div时，必须将div放在td中，否则达不到预期效果--> 
    <div id="test" style="display:none;"> 
    <table> 
      <tr> 
        <td> 
      <input type="text" value="1"/> 
      </td> 
      </tr> 
    </table> 
    </div> 
    </td>    
      </tr> 
    </table> 
  </body> 
</html>

table嵌套div时，div必须放到td中，否则达不到预期的效果;但是div嵌套table时，div中写table、tr、td任意一个都可以正常显示。

如果要对tr、td隐藏时，这个时候div就不起作用了，可以直接对tr、td进行隐藏，当然如果闲一行一行隐藏太麻烦了，那就试试tbody吧，把div替换成tbody将需要隐藏的tr、td放到tbody中，这样就可以显示和隐藏了，见代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"> 
    <title>Untitled Document</title> 
    <script language="JavaScript" src="js/prototype.js"></script> 
    <script language="JavaScript"> 
      function changeStyle(){ 
        if(document.getElementById('test').style.display=='none'){ 
          alert("show"); 
          document.getElementById('test').style.display='block' 
        }else{ 
          alert("hide"); 
          document.getElementById('test').style.display='none' 
        } 
      } 
    </script> 
  </head> 
  <body> 
    <input value="测试" type="button" onclick="changeStyle()"> 
    <select type="button" value="测试" onchange="changeStyle();"> 
      <option>1</option> 
      <option>2</option> 
    </select> 
    <table> 
      <tbody id="test"><!--tbody替代了div的作用--> 
      <tr> 
      <td> 
      <input type="text" value="1"/> 
    </td>    
      </tr> 
      </tbody> 
    </table> 
  </body> 
</html>

转载于:https://www.cnblogs.com/sanxinglan/p/3342189.html

weixin_30415801

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table与div互相嵌套注意

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; char...
复制链接

扫一扫