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