html中我想通过点击一个div标签的文字实现对一个表的隐藏和显示，以前用过js实现久了不用忘了
如图，点击人员管理，下面这个table就会hidde，在点一下就显示！最好能有源码
这个不知一个表，比如有（人员管理）（装备管理）....等等，每个表有一个隐藏和显示的按钮
首先给人员管理这个div一个id
然后设置这个表display属性为none
<div id="id1">人员管理</div><table id="table1" style="display: none">
<tr>
<td>增加</td>
<td>删除</td>
<td>修改</td>
<td>管理</td>
</tr>
</table>
<script type="text/javascript">
$(function () {
$('#id1').on("click", function () {
$('#table1').toggle();
});
//多表格 这继续取id
});
</script>
温馨提示：答案为网友推荐，仅供参考
第1个回答 2013-09-12
<b onClick="show()">click</b>
<table id="t1">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
<script>
function show(){
var t1=document.getElementById('t1');
if(t1.style.display=="none"){
document.getElementById('t1').style.display='block';
}else{
document.getElementById('t1').style.display='none';
}
}
</script>追问
<table id="t1">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
<script>
function show(){
var t1=document.getElementById('t1');
if(t1.style.display=="none"){
document.getElementById('t1').style.display='block';
}else{
document.getElementById('t1').style.display='none';
}
}
</script>追问
如果我有两个表分别对应两个文字按钮，ID处应该怎么修改呢（table1：id=t1）（table2：id=t2）....对应的，不只一个表
第2个回答 2013-09-12
<div id="mg">人员管理</div>
<table id="tb">
<tr><td>人员增加</td></tr>
<tr><td>人员删除</td></tr>
<tr><td>人员管理</td></tr>
</table>
JS部分:
<script type="text/javascript">
<!--
var oDiv=document.getElementById("mg"); // 获取 div
var oTb=document.getElementById("td"); // 获取 表格
// 下面加事件
oDiv.onclick=function (){
if(oTb.style.display=="none"){
oTb.style.display="block"; // 显示表格
}else{
oTb.style.display="none"; // 隐藏表格
}
}
//-->
</script>
<table id="tb">
<tr><td>人员增加</td></tr>
<tr><td>人员删除</td></tr>
<tr><td>人员管理</td></tr>
</table>
JS部分:
<script type="text/javascript">
<!--
var oDiv=document.getElementById("mg"); // 获取 div
var oTb=document.getElementById("td"); // 获取 表格
// 下面加事件
oDiv.onclick=function (){
if(oTb.style.display=="none"){
oTb.style.display="block"; // 显示表格
}else{
oTb.style.display="none"; // 隐藏表格
}
}
//-->
</script>
第3个回答 2013-09-12
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#hidden{background:#F00; width:100px; height:30px;}
</style>
<script type="text/javascript">
function hiddenTab(){
var t=document.getElementById("tab");
if(t.style.display!="none")
t.style.display="none";
else
t.style.display="block";
}
</script>
</head>
<body>
<div id="hidden" onclick="hiddenTab();">人员管理</div>
<div id="tab">
<table width="100" height="100">
<tr><td>人员增加</td></tr>
<tr><td>人员删除</td></tr>
<tr><td>人员管理</td></tr>
</table>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#hidden{background:#F00; width:100px; height:30px;}
</style>
<script type="text/javascript">
function hiddenTab(){
var t=document.getElementById("tab");
if(t.style.display!="none")
t.style.display="none";
else
t.style.display="block";
}
</script>
</head>
<body>
<div id="hidden" onclick="hiddenTab();">人员管理</div>
<div id="tab">
<table width="100" height="100">
<tr><td>人员增加</td></tr>
<tr><td>人员删除</td></tr>
<tr><td>人员管理</td></tr>
</table>
</div>
</body>
</html>