jQuery模糊查询的两种方法

方法一：jQuery根据文本框输入实时模糊查询

HTML代码：

<table border="1" cellspacing="0" cellpadding="0" id="table">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>2014213840</td>
				<td>张三</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr>
				<td>2014213841</td>
				<td>李四</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr>
				<td>2014213842</td>
				<td>王三</td>
				<td>女</td>
				<td>30</td>
			</tr>
		</table>
		<input type="text" name="" id="input" value="" placeholder="请输入查询关键字"/>

JS代码：

		var text = "";
		//实时筛选，不用点击按钮
		setInterval(function(){
			text = $('#input').val();//获取文本框输入
			if($.trim(text) != ""){
					$("#table tr:not('#theader')").hide().filter(":contains('"+text+"')").show();
			}else{
				$('#table tr').show();//当删除文本框的内容时，又重新显示表格所有内容
			}
		},100);

实现效果：

初始状态

文本框内输入文字“三”

方法二：新增“搜索”按钮，只有当点击“按钮”后，显示查询结果。

HTML代码：与第一种方法相比，仅仅多了一个按钮

		<table border="1" cellspacing="0" cellpadding="0" id="table">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>2014213840</td>
				<td>张三</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr>
				<td>2014213841</td>
				<td>李四</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr>
				<td>2014213842</td>
				<td>王三</td>
				<td>女</td>
				<td>30</td>
			</tr>
		</table>
		<input type="text" name="" id="input" value="" placeholder="请输入查询关键字"/>
		<input type="button" name="" id="search" value="搜索" />

JS代码：

// 通过点击按钮开始筛选
		$(function(){
			$('#search').click(function(){
				var text = $('#input').val();//获取文本框输入
				if($.trim(text) != ""){
					$("#table tr:not('#theader')").hide().filter(":contains('"+text+"')").show();
				}
			})
		});

实现效果：

初始状态：

当文本框内输入文字“三”，并且点击“搜索”按钮后：

以上两种方法均基于已经加载了jquery库的前提下，所以记得加载jquery库。以上！