首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

table与div互相嵌套时,要注意的有关问题

2012-11-11 
table与div互相嵌套时,要注意的问题!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.o

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>

?

热点排行