通过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,支持转载但要下标注;
欢迎光临个人主页
等一下( •́ .̫ •̀ ),我还有最后一句话:
这里虽然没有都市的繁华,
也没有山林的鸟语花香,
只有一片如水的宁静,
古人云:
既来之则安之,
既然来到了这里,
就可以静心休憩你的灵魂,
调养你疲惫的心,
再见…