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库。以上！