JQuery模糊查询

☞☞ 个人主页欢迎访问 ☜☜

---

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

HTML部分

<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部分

<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，支持转载但要下标注；
欢迎光临个人主页

等一下( •́ .̫ •̀ )，我还有最后一句话：

这里虽然没有都市的繁华，

也没有山林的鸟语花香，

只有一片如水的宁静，

古人云：

既来之则安之，

既然来到了这里，

就可以静心休憩你的灵魂，

调养你疲惫的心，

再见...