table與div互相嵌套注意

本文轉載自查看原文 2013-09-27 09:48 18951 其他

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iview table嵌套table DIV的Position屬性和DIV嵌套DIV 實戰案例：DIV嵌套 div嵌套居中關於DIV嵌套（二）：div嵌套div水平垂直居中 Layui table嵌套select element table 表格嵌套 html中div中嵌套div (轉)Div和Table的區別讓div中的table居中