JQuery模糊查询

通过JQuery中的过滤器filter配合选择器:contains来实现一个模糊查询

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<lable for="inp">请输入您要搜索的关键字:</lable>
<input type="text" id="inp" /><hr />
<table border="1" cellspacing="2" cellpadding="2">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>男</td>
<td>190</td>
<td>85</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
<td>175</td>
<td>50</td>
<td>北京</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>女</td>
<td>168</td>
<td>55</td>
<td>天津</td>
</tr>
<tr>
<td>赵四</td>
<td>30</td>
<td>男</td>
<td>185</td>
<td>70</td>
<td>辽宁</td>
</tr>
<tr>
<td>赵云</td>
<td>27</td>
<td>男</td>
<td>188</td>
<td>70</td>
<td>北</td>
</tr>
<tr>
<td>马超</td>
<td>28</td>
<td>男</td>
<td>185</td>
<td>70</td>
<td>辽宁</td>
</tr>
</tbody>
</table>

接下来需要引入一个jquery.js,选择器:contains是在1.1.4版本才更新的,因此需要引入1.1.4版本之后的jquery,在这里我引入的是1.9.1的版本

JS部分

1
2
3
4
5
6
7
8
9
<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#inp').keyup(function(){
$('table tbody tr').hide().filter(":contains("+$(this).val()+")").show();
});
});
</script>

希望阅读完本文可以帮助到您,谢谢O(∩_∩)O~
欢迎访问我的GitHub,喜欢的可以star,项目随意fork,支持转载但要下标注;
欢迎光临个人主页

等一下( •́ .̫ •̀ ),我还有最后一句话:
这里虽然没有都市的繁华,
也没有山林的鸟语花香,
只有一片如水的宁静,
古人云:
既来之则安之,
既然来到了这里,
就可以静心休憩你的灵魂,
调养你疲惫的心,
再见…