用js控制表格的隐藏与显示

来源：互联网发布：centos防火墙配置文件编辑：程序博客网时间：2024/05/17 23:15

-----------------------------------------------------------
<script>
function show()
{
if (t2.style.display=="none")
{
t2.style.display=""
//t3.style.display="none"
}
else
{
t2.style.display="none"
//t3.style.display=""
}

}
</script>
<table name="t1" border="2">
<tr>
<td>
<form name="form1">
<input type="radio" onclick="show()">显示/影藏
</form>
</td>
</tr>
</table>
<table id="t2" border="2" style="display:none">
<tr>
<td>t2</td>
</tr>
</table>
<table id="t3" border="2">
<tr>
<td>t3</td>
</tr>
</table>
<table id="t4" border="2">
<tr>
<td>t4</td>
</tr>
</table>
----------------------------------------------------------------------
<table name="t1" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form name="form1" method="post" action="">
<input type="checkbox" name="radiobutton" value="radiobutton" onclick="t2.style.display=checked?'':'none'" checked>
显示/隐藏
</form>
</td>
</tr>
</table>
<table id="t2" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> 2</td>
</tr>
</table>
<table name="t3" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> 3</td>
</tr>
</table>
<table name="t4" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> 4</td>
</tr>
</table>
-----------------------------------------------------------------------
<table name="t1" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form name="form1" method="post" action="">
<input type="checkbox" name="radiobutton" value="radiobutton" onclick="t2.style.display=checked?'':'none';t3.style.display=checked?'none':''">
显示/隐藏
</form>
</td>
</tr>
</table>
<table id="t2" width="100%" border="0" cellspacing="0" cellpadding="0" style="display:none">
<tr>
<td> 2</td>
</tr>
</table>
<table id="t3" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> 3</td>
</tr>
</table>
<table name="t4" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> 4</td>
</tr>
</table>
---------------------------------------------------------------------------

<table id="sbr">
<tr>
<td>sdaf</td>
</tr>
<table>
<input name=button1 type=button value="按" onclick=show()>
<script language=javascript>
function show()
{
var obj=document.getElementById("sbr")
obj.style.display=(obj.style.display=="")?"none":""
}
</script>
----------------------------------------------------------------------