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