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

40 阅读 0 评论 27 点赞

我是靠谱客的博主平淡楼房，最近开发中收集的这篇文章主要介绍用js控制表格的隐藏与显示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

-----------------------------------------------------------
<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" οnclick="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" οnclick="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" οnclick="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="按" οnclick=show()>
<script language=javascript>
function show()
{
var obj=document.getElementById("sbr")
obj.style.display=(obj.style.display=="")?"none":""
}
</script>
----------------------------------------------------------------------