jQuery点击图片实现表格的隐藏与显示

1、定义好一个图片标签

<img class="required" title="已存在的投诉信息可以通过此处查询"
		src="${ctx}/css/images/+.png" height="16px"
		οnclick="slideToggle('drawer1')" id="img_drawer1"> 业务订单号

function slideToggle(id) {
	var src = $("#img_" + id).attr("src");
	if (src.indexOf('up.png') > -1) {//如果要检索的字符串值没有出现，则该方法返回 -1。
		$("#img_" + id).attr( {
			src : "${ctx}/css/images/down.png",
			alt : "展开"
		});
		$("#tr_" + id).attr( {
			title : "展开"
		});
		$("#" + id).slideToggle(500);
	} else if (src.indexOf('down.png') > -1) {
		$("#img_" + id).attr( {
			src : "${ctx}/css/images/up.png",
			alt : "隐藏"
		});
		$("#tr_" + id).attr( {
			title : "隐藏"
		});
		$("#" + id).slideToggle(500);
	} else if (src.indexOf('+.png') > -1) {
		$("#img_" + id).attr( {
			src : "${ctx}/css/images/-.png"
		});
		//$("#tr_"+id).attr({title:"隐藏"});
		$("#tr_drawer2").slideToggle();
		$("#tr_drawer3").slideToggle();
	} else if (src.indexOf('-.png') > -1) {
		$("#img_" + id).attr( {
			src : "${ctx}/css/images/+.png"
		});
		//$("#tr_"+id).attr({title:"展开"});
		$("#tr_drawer2").slideToggle();
		$("#tr_drawer3").slideToggle();
	}

}

调用此函数即可实现表格的显示与隐藏

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

最后

以上就是开心秀发为你收集整理的jQuery点击图片实现表格的隐藏与显示的全部内容，希望文章能够帮你解决jQuery点击图片实现表格的隐藏与显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。