怎么用jquery实现单击按钮（button）时，显示出一个表格，再次单击时，把表格隐藏起来,要具体代码，谢谢！
我做的是查询系统，上面有个查找客户按钮,我单击那个按钮时，在按钮下面出来一个查找客户的表格，再次单击查找客户按钮时，表格隐藏掉。...
我做的是查询系统，上面有个查找客户按钮,我单击那个按钮时，在按钮下面出来一个 查找客户的表格，再次单击查找客户按钮时，表格隐藏掉。
展开
4个回答
展开全部
下载：jquery-1.6.2.js 地址：http://code.jquery.com/jquery-1.6.2.js，命名jquery-1.6.2.js，放于本网页同级目录。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
if($("#button").val()=="隐藏") {
$("#button").val("显示");
$("#table").hide();
}
else {
$("#button").val("隐藏");
$("#table").show();
}
});
});
</script>
</head>
<body >
<table width="200" border="1" id="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<label>
<input name="button" type="button" id="button" value="隐藏" />
</label>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
if($("#button").val()=="隐藏") {
$("#button").val("显示");
$("#table").hide();
}
else {
$("#button").val("隐藏");
$("#table").show();
}
});
});
</script>
</head>
<body >
<table width="200" border="1" id="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<label>
<input name="button" type="button" id="button" value="隐藏" />
</label>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
($('#按钮id').click(function () {
($('#表格id').is(":visible")) {
$('#表格id').hide();
} else {
$('#表格id').show();
}
});
($('#表格id').is(":visible")) {
$('#表格id').hide();
} else {
$('#表格id').show();
}
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jquery有个hide 函数，你把按钮绑定这个函数，然后将这个表格放在一个div
里面，然后用hide函数来隐藏这个div就行啦
里面，然后用hide函数来隐藏这个div就行啦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$("#panel").slideToggle("fast");
$(this).toggleClass("active");
return false;
});
$("#but2").click(function(){
$("table").slideToggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
</head>
<body>
<div>
<div style="display: none;" id="panel">
panel
<table border="1">
<tr><th>tr1th1</th><th>tr1th2</th></tr>
<tr><td>tr2th1</td><td>tr2th2</td></tr>
</table>
</div>
<input type="button" id="but1" value="showdiv" />
<input type="button" id="but2" value="showtab" />
</div>
</body></html>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$("#panel").slideToggle("fast");
$(this).toggleClass("active");
return false;
});
$("#but2").click(function(){
$("table").slideToggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
</head>
<body>
<div>
<div style="display: none;" id="panel">
panel
<table border="1">
<tr><th>tr1th1</th><th>tr1th2</th></tr>
<tr><td>tr2th1</td><td>tr2th2</td></tr>
</table>
</div>
<input type="button" id="but1" value="showdiv" />
<input type="button" id="but2" value="showtab" />
</div>
</body></html>
追问
只要一个按钮就行 而且你的方法是让表格出现在按钮上面 ，如果让表格下面的话怎么改啊，谢谢了？
追答
$(function(){
$("#but1").click(function(){
$("table").slideToggle("fast");
$(this).toggleClass("active");
return false;
});
});
tr1th1tr1th2
tr2th1tr2th2
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
