zoukankan      html  css  js  c++  java
  • jquery实现表格内容筛选

    对于表格来说,当数据比较多的时候,我们无法一页一页的查找,这时可以通过一个搜索框来实现搜索。

    对于这个搜素框,我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选,而不是填完以后点击搜索按钮再执行。

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <script src="jquery-1.3.2.min.js"></script>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script>
            $(function () {
                $("tr.parent").click(function () {
                    $(this)
                    .siblings('.child_'+this.id).toggle();
                    
                });
                $("tr.parent").addClass("selected");
                $("#searchbox").keyup(function () {
                    $("table tbody tr").hide()
                    .filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
                }).keyup();
            });
        </script>
        <title></title>
    </head>
    <body>
        <label>筛选</label>
        <input type="text" id="searchbox"/>
        <table>
            <thead>
                <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
            </thead>
            <tbody>
                <tr class="parent" id="row_01"><td>前台设计组</td></tr>
                <tr class="child_row_01"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_01"><td>李山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_01"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_01"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="parent" id="row_02"><td>前台设计组</td></tr>
                <tr class="child_row_02"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_02"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_02"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_02"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="parent" id="row_03"><td>前台设计组</td></tr>
                <tr class="child_row_03"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_03"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_03"><td>张山</td><td></td><td>湖北</td></tr>
                <tr class="child_row_03"><td>张山</td><td></td><td>湖北</td></tr>
            </tbody>
        </table>
    </body>
    </html>
  • 相关阅读:
    改变对象的字符串提示
    perl 和 python中的回调函数
    shiro权限验证标签
    user_tables 的信息依赖于统计信息
    centos jdk 1.7升级到1.8后显示还是1.7
    7.1 可接受任意数量参数的函数:
    IntelliJ IDEA中怎么查看文件中所有方法(类似eclipse里面的outline)
    Intellij IDEA 代码格式化与eclipse保持风格一致
    jquery-1.9.1.min.js:69 Uncaught TypeError: Illegal invocation
    python json模块
  • 原文地址:https://www.cnblogs.com/JsonZhangAA/p/5469573.html
Copyright © 2011-2022 走看看