怎么用jquery实现单击按钮（button）时，显示出一个表格，再次单击时，把表格隐藏起来,要具体代码，谢谢！

我做的是查询系统，上面有个查找客户按钮,我单击那个按钮时，在按钮下面出来一个查找客户的表格，再次单击查找客户按钮时，表格隐藏掉。... 我做的是查询系统，上面有个查找客户按钮,我单击那个按钮时，在按钮下面出来一个查找客户的表格，再次单击查找客户按钮时，表格隐藏掉。展开

 我来答

4个回答

#热议# 应届生在签三方时要注意什么？

piplive
推荐于2017-09-24 · TA获得超过1194个赞

知道小有建树答主

回答量：188

采纳率：100%

帮助的人：146万

我也去答题访问个人页

关注

展开全部

下载：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>

已赞过 已踩过<

评论收起

台州市华樽网络科技

广告2024-12-21

excel表格是一款办公软件套装，可以实现办公软件常用的文字表格，演示等多种功能。内存占用低，运行速度快，体积小巧。

woo.huazun2.top

毅两小面
2011-08-11 · TA获得超过132个赞

知道答主

回答量：129

采纳率：0%

帮助的人：145万

我也去答题访问个人页

关注

展开全部

($('#按钮id').click(function () {
($('#表格id').is(":visible")) {
$('#表格id').hide();
} else {
$('#表格id').show();
}
});

已赞过 已踩过<

评论收起

sunyongxing01
2011-08-12

知道答主

回答量：53

采纳率：0%

帮助的人：31.4万

我也去答题访问个人页

关注

展开全部

jquery有个hide 函数，你把按钮绑定这个函数，然后将这个表格放在一个div
里面，然后用hide函数来隐藏这个div就行啦

已赞过 已踩过<

评论收起

匿名用户
2011-08-11

展开全部

<!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>

追问

只要一个按钮就行 而且你的方法是让表格出现在按钮上面 ，如果让表格下面的话怎么改啊，谢谢了？

追答



$(function(){
	$("#but1").click(function(){
		$("table").slideToggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});

tr1th1tr1th2
	tr2th1tr2th2