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