美文网首页
jquery快速实现全局搜索表格内容

jquery快速实现全局搜索表格内容

作者: JokerPeng | 来源:发表于2017-05-31 22:19 被阅读0次

如何实现对表格数据内容的快速筛选和查找呢?
jquery中的filter和contains共同使用可以快速实现了这个功能。
如下html代码:

<div class="wrapper" style="width:300px;margin:50px auto">
        <label>筛选</label>
        <input type="text" id="searchbox" style="width:257px"/>
        <div class="margin" style="margin-top:10px;"></div>
        <table border="1" cellspacing="0">
            <thead>
                <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
            </thead>
            <tbody>
                <tr><td>张山</td><td>男</td><td>湖北</td></tr>
                <tr><td>abd</td><td>女</td><td>湖南</td></tr>
                <tr><td>王麻子</td><td>男</td><td>河北</td></tr>
                <tr><td>李四</td><td>男</td><td>河南</td></tr>
                <tr><td>王五11</td><td>女</td><td>江苏</td></tr>
                <tr><td>赵六d</td><td>男</td><td>江西</td></tr>
            </tbody>
        </table>
    </div>

可以实现如下简单的搜索框和表格界面:

表格和搜索框.png

需要实现在搜索框中输入内容,然后对表格内容筛选删除搜索框内容时,所有表格数据还原显示。jquery代码如下:

<script>
        $(function () {
            $("#searchbox").keyup(function () {
                $("table tbody tr").hide()
                .filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
            }).keyup();
        });
    </script>
输入'男'.png

相关文章

网友评论

      本文标题:jquery快速实现全局搜索表格内容

      本文链接:https://www.haomeiwen.com/subject/gnajfxtx.html