Code666 (代码贴、代码片段)

[JavaScript] jquery 筛选器 过滤器 filter() →→→→→进入此内容的聊天室

来自 , 2020-06-14, 写在 JavaScript, 查看 97 次.
URL http://www.code666.cn/view/73278a4a
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.   <title></title>
  7.   <link href="css/style.css" rel="stylesheet" type="text/css" /><!--   引入jQuery -->
  8.  
  9.   <script src="../scripts/jquery-1.3.1.js" type="text/javascript">
  10. </script>
  11.   <script type="text/javascript">
  12. //<![CDATA[
  13.   $(function(){
  14.        $("#filterName").keyup(function(){
  15.               $("table tbody tr")
  16.                                         .hide()
  17.                                         .filter(":contains('"+( $(this).val() )+"')")
  18.                                         .show();
  19.            }).keyup();
  20.   })
  21.   //]]>
  22.   </script>
  23. </head>
  24.  
  25. <body>
  26.   <div>
  27.     <br />
  28.     筛选： <input id="filterName" /><br />
  29.   </div>
  30.  
  31.   <table>
  32.     <thead>
  33.       <tr>
  34.         <th>姓名</th>
  35.  
  36.         <th>性别</th>
  37.  
  38.         <th>暂住地</th>
  39.       </tr>
  40.     </thead>
  41.  
  42.     <tbody>
  43.       <tr>
  44.         <td>张山</td>
  45.  
  46.         <td>男</td>
  47.  
  48.         <td>浙江宁波</td>
  49.       </tr>
  50.  
  51.       <tr>
  52.         <td>李四</td>
  53.  
  54.         <td>女</td>
  55.  
  56.         <td>浙江杭州</td>
  57.       </tr>
  58.  
  59.       <tr>
  60.         <td>王五</td>
  61.  
  62.         <td>男</td>
  63.  
  64.         <td>湖南长沙</td>
  65.       </tr>
  66.  
  67.       <tr>
  68.         <td>找六</td>
  69.  
  70.         <td>男</td>
  71.  
  72.         <td>浙江温州</td>
  73.       </tr>
  74.  
  75.       <tr>
  76.         <td>Rain</td>
  77.  
  78.         <td>男</td>
  79.  
  80.         <td>浙江杭州</td>
  81.       </tr>
  82.  
  83.       <tr>
  84.         <td>MAXMAN</td>
  85.  
  86.         <td>女</td>
  87.  
  88.         <td>浙江杭州</td>
  89.       </tr>
  90.  
  91.       <tr>
  92.         <td>王六</td>
  93.  
  94.         <td>男</td>
  95.  
  96.         <td>浙江杭州</td>
  97.       </tr>
  98.  
  99.       <tr>
  100.         <td>李字</td>
  101.  
  102.         <td>女</td>
  103.  
  104.         <td>浙江杭州</td>
  105.       </tr>
  106.  
  107.       <tr>
  108.         <td>李四</td>
  109.  
  110.         <td>男</td>
  111.  
  112.         <td>湖南长沙</td>
  113.       </tr>
  114.     </tbody>
  115.   </table>
  116. </body>
  117. </html>
  118.  

回复 "jquery 筛选器 过滤器 filter()"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666