table与div互相嵌套时，要注意的问题
2010-07-21 16:25
239 查看
<!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>本文出自 “博客即日起停止更新” 博客，请务必保留此出处http://sucre.blog.51cto.com/1084905/354440
<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>本文出自 “博客即日起停止更新” 博客，请务必保留此出处http://sucre.blog.51cto.com/1084905/354440
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- table与div互相嵌套注意
- table与div互相嵌套注意
- table和div在页面布局上应该注意的问题
- div中嵌套div中使用margin-top失效问题
- 慎用create table as select,一定要注意默认值的问题
- JavaScript Tip/Trick: 动态创建Table时，在IE中需要注意的一个问题
- 页面设计中a标签内嵌套div标签的高度问题
- IE6 IE7: div中table宽度100%导致的宽度问题
- TableView中注意问题:
- HTML中div标签与table标签组合使用问题
- Knockout 组件嵌套模板书写注意问题
- DIV高度自适应及注意问题(转)
- 小菜学习日记—div嵌套导致子区域margin-top失效问题(外边距合并问题)
- div里嵌套了img底部会有白块问题和图片一像素问题解决
- 关于firefox不兼容DIV嵌套的问题
- 10个DIV+CSS需要注意的问题
- 在table中嵌套div 怎么把div在table中置顶？
- DIV+CSS建站对浏览器的兼容性问题和注意事项
- sql 嵌套while需要注意的问题
- 通过动态设置ListView高度来解决ScollView与ListView互相嵌套的问题