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