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

pigkiller

浏览: 67698 次
性别:
来自: 深圳

最近访客更多访客>>

fabulasia

春宽梦窄

kanson

sieqo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

jQuery JavaScript XHTML CSS 脚本

前段时间碰到个小问题，需求是根据页面输入的参数将已经返回前台页面的内容查询过滤一遍，能查询匹配到的显示，其他隐藏。原理其实很简单就是查询到了调用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>