zoukankan      html  css  js  c++  java
  • jQuery学习笔记2--表格内容筛选

    jQuery代码  

    <script type="text/javaScript">
            $(function(){
                $("#filterName").keyup(function(){ //绑定键盘键入事件
                    $("table tbody tr").hide()  // 鼠标键入的时候tr全隐藏
                    .filter(":contains('"+($(this).val())+"')").show();  // 匹配包含键入的指定文本并显示
                }).keyup(); //DOM加载完
            });
        </script>

    html代码:

        <p>筛选:<input type="text" id="filterName" /></p>
        <table style="800px; border:1px solid #ccc">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>暂住证</th>
                </tr>
            </thead>
            <tbody>
                   
                <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_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_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>

  • 相关阅读:
    两数之和
    swift 结构体
    打家劫舍II
    Swift的访问控制讲解
    swift版 二分查找 (折半查找)
    RAC(ReactiveCocoa)介绍(一)
    变位词
    双向循环链表
    单链表
    顺序链表(C++)
  • 原文地址:https://www.cnblogs.com/qdmaomao/p/4546604.html
Copyright © 2011-2022 走看看