动态控制html元素显示/隐藏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态控制html元素显示/隐藏</title>
<script language=javascript>
/**
javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位
*/
//控制显现方法1(方法1隐藏后 页面的位置不被占用,类似于.net验证控件的Display=Dynamic)
function display(id){
var traget=document.getElementById(id);
if(traget.style.display=="none"){
traget.style.display="inline";
}else{
traget.style.display="none";
}
}
//控制显现方法2(方法2隐藏后 页面的位置还被控件占用,只是不显示,类似于.net验证控件的Display=Static)
function display2(id){
var traget=document.getElementById(id);
if(traget.style.visibility=="hidden"){
traget.style.visibility="visible";
}else{
traget.style.visibility="hidden";
}
}
</script>
</head>
<body>
<table width="445" height="182" border="1" cellpadding="2" cellspacing="2" id="tab1">
<tbody>
<tr>
<td width="124">控制这个tab的隐藏与显现</td>
<td width="119"> </td>
<td width="102"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<input type="button" onclick="display2('tab1')" value="table 显示/隐藏"/>
<table>
<tr id="menu" >
<td height="51">控制这个tr的显示/隐藏</td>
</tr>
</table>
<input type="button" onclick="display('menu')" value="tr 显示/隐藏"/>
</body>
</html>