<
!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>
< 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>
< 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>
本文转自sucre03 51CTO博客,原文链接:http://blog.51cto.com/sucre/354440,如需转载请自行联系原作者