欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

jquery实现表格内容的查找和隐藏 -

更新时间: 2015-05-04 00:00:00 责任编辑: Author_N16

 

    前段时间碰到个小问题,需求是根据页面输入的参数将已经返回前台页面的内容查询过滤一遍,能查询匹配到的显示,其他隐藏。原理其实很简单就是查询到了调用jQuery的hide()方法即可,细节问题推敲调试即可,想想这种需求很普通平常就在各论坛网站搜索一番,大出本人意料的是大多实现十分复杂繁琐。本人现在就来一个简化版的。由于功能确实挺简单也就不讲解了,在JavaScript脚本里已经加了大量详细的代码了。直接贴代码了,附件也上传上来,有兴趣的朋友下载下来可以把玩一下。

 

<!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>
	<title>jQuery实现表格内容的查找和隐藏</title>
	<meta content="text/html; charset=gbk" http-equiv="content-type" />	
	<meta content="zh-cn" http-equiv="content-language" />	
	<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
	<style type="text/css">
		<!--		
		table th,table td{
			padding:5px 10px;
			border:1px;
		}		
		-->
	</style>
</head>
<body>
	<table id="myTable" align="center" border="1">
	<tbody>
	<tr>
		<td>性别</td>
		<td>
			<select id="querySelect">
				<option value="0">姓名</option>
				<option value="1">性别</option>
				<option value="2">年龄</option>
				<option value="3">所在城市</option>
			</select>
		</td>		
		<td><input id="queryInput" class="i_a" value="请输入信息"></input></td>
		<td><input id="queryButton" type="button" value="查询"></td>
	</tr>
	</tbody>
	<tbody>
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
		<th>所在城市</th>
	</tr>
	<tr>
		<td>张羽</td>
		<td>男</td>		
		<td>26</td>
		<td>济南</td>
	</tr>
	<tr>
		<td>曹操</td>
		<td>男</td>		
		<td>28</td>
		<td>太原</td>
	</tr>
	<tr>
		<td>赵云</td>
		<td>男</td>		
		<td>25</td>
		<td>成都</td>
	</tr>
	<tr>
		<td>孙尚香</td>
		<td>女</td>		
		<td>24</td>
		<td>重庆</td>
	</tr>
	<tr>
		<td>貂蝉</td>
		<td>女</td>		
		<td>23</td>
		<td>咸阳</td>
	</tr>
	<tr>
		<td>大乔</td>
		<td>女</td>		
		<td>22</td>
		<td>长沙</td>
	</tr>
	</tbody>
	</table>
</body>
<script language="javascript">
$(document).ready(function(){

	//给查询按钮click事件绑定queryRecvAccInfos函数
	$('#queryButton').bind('click',queryRecvAccInfos)

	//功能:依据输入参数在现有表格内容中查找匹配行并隐藏不匹配的行内容
	function queryRecvAccInfos(){

		//获取下拉列表的value值,此处取巧value值正是要查询表格内容的列index
		var index = $('#querySelect').val();

		//获取输入参数内容
	    var param = $('#queryInput').val();

		//获取id为myTable下的第2个tbody下的tr循环处理
    	$('#myTable tbody').eq(1).find('tr').each(function () {

			//先显示当前tr
    		$(this).show();

			//获取当前tr内下标为index的列的文本值,现在知道这个index很重要了吧?哈哈...
        	var targetText =  $($(this).find('td').get(index)).text(); 

			//如果输入参数的文本值模糊匹配不到此文本值则隐藏此tr
   			if(targetText.indexOf(param) == -1){
            	$(this).hide();
          	}				
    	});
    }
});
</script>
</html>
 

 

 

 

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2015-05-04 00:00:00
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1852558/
本文WWW.DOC100.NET DOC100.NET版权所有。