zoukankan      html  css  js  c++  java
  • jQuery之四:Table过滤

    1 内容Html

    <body>
    <div>
    <br/>
    筛选:
    <input id="filterName" />
    <br/>

    </div>

    <table>
    <thead>
    <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
    <tr><td>张山</td><td></td><td>浙江宁波</td></tr>
    <tr><td>李四</td><td></td><td>浙江杭州</td></tr>
    <tr><td>王五</td><td></td><td>湖南长沙</td></tr>
    <tr><td>找六</td><td></td><td>浙江温州</td></tr>
    <tr><td>Rain</td><td></td><td>浙江杭州</td></tr>
    <tr><td>MAXMAN</td><td></td><td>浙江杭州</td></tr>
    <tr><td>王六</td><td></td><td>浙江杭州</td></tr>
    <tr><td>李字</td><td></td><td>浙江杭州</td></tr>
    <tr><td>李四</td><td></td><td>湖南长沙</td></tr>
    </tbody>
    </table>

    </body>

    2 格式 css

    table        { border:0;border-collapse:collapse;}
    div{font:normal 12px
    /17px Arial;}
    td { font:normal 12px
    /17px Arial;padding:2px;100px;}
    th { font:bold 12px
    /17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;100px;}
    .even { background:#FFF38F;}
    /* 偶数行样式*/
    .odd { background:#FFFFEE;}
    /* 奇数行样式*/
    .selected { background:#FF6500;color:#fff;}

    3 控制 javascrit

    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <!-- 引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $(
    "#filterName").keyup(function(){
    $(
    "table tbody tr")
    .hide()
    .filter(
    ":contains('"+( $(this).val() )+"')")
    .show();
    }).keyup();
    })
    </script>
  • 相关阅读:
    Docker系列二:Docker的基本结构
    Codeforces 1013
    树形结构升级
    Codeforces 402 and 403 (Div. 2 and 1)
    Codeforces 342
    图论基础
    树形结构基础
    Codeforces 788 (Div. 1)
    NOIP/CSP-J/S初赛集锦
    树的重心
  • 原文地址:https://www.cnblogs.com/zjwei55/p/2152623.html
Copyright © 2011-2022 走看看