+ -
当前位置:首页 → 问答吧 → 过滤搜索为什么只能用filter而不能用find?

过滤搜索为什么只能用filter而不能用find?

时间:2010-03-20

来源:互联网

复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.         table {
  7.             border: 0;
  8.             border-collapse: collapse;
  9.         }
  10.         div {
  11.             font: normal 12px / 17px Arial;
  12.         }
  13.         td {
  14.             font: normal 12px / 17px Arial;
  15.             padding: 2px;
  16.             width: 100px;
  17.         }
  18.         th {
  19.             font: bold 12px / 17px Arial;
  20.             text-align: left;
  21.             padding: 4px;
  22.             border-bottom: 1px solid #333;
  23.             width: 100px;
  24.         }
  25.         .even {
  26.             background: #FFF38F;
  27.         }
  28.         /* 偶数行样式*/
  29.         .odd {
  30.             background: #FFFFEE;
  31.         }
  32.         /* 奇数行样式*/
  33.         .selected {
  34.             background: #FF6500;
  35.             color: #fff;
  36.         }
  37.     </style>
  38.     <!--   引入jQuery -->
  39.     <script type="text/javascript" src="jquery-1.4.2.js"></script>
  40. </head>
  41. <body>
  42. <div>
  43.     <br/>
  44.     筛选:
  45.     <input id="filterName"/>
  46.     <br/>
  47. </div>
  48. <table>
  49.     <thead>
  50.     <tr>
  51.         <th>姓名</th>
  52.         <th>性别</th>
  53.         <th>暂住地</th>
  54.     </tr>
  55.     </thead>
  56.     <tbody>
  57.     <tr>
  58.         <td>张山</td>
  59.         <td>男</td>
  60.         <td>浙江宁波</td>
  61.     </tr>
  62.     <tr>
  63.         <td>李四</td>
  64.         <td>女</td>
  65.         <td>浙江杭州</td>
  66.     </tr>
  67.     <tr>
  68.         <td>王五</td>
  69.         <td>男</td>
  70.         <td>湖南长沙</td>
  71.     </tr>
  72.     <tr>
  73.         <td>找六</td>
  74.         <td>男</td>
  75.         <td>浙江温州</td>
  76.     </tr>
  77.     <tr>
  78.         <td>Rain</td>
  79.         <td>男</td>
  80.         <td>浙江杭州</td>
  81.     </tr>
  82.     <tr>
  83.         <td>MAXMAN</td>
  84.         <td>女</td>
  85.         <td>浙江杭州</td>
  86.     </tr>
  87.     <tr>
  88.         <td>王六</td>
  89.         <td>男</td>
  90.         <td>浙江杭州</td>
  91.     </tr>
  92.     <tr>
  93.         <td>李字</td>
  94.         <td>女</td>
  95.         <td>浙江杭州</td>
  96.     </tr>
  97.     <tr>
  98.         <td>李四</td>
  99.         <td>男</td>
  100.         <td>湖南长沙</td>
  101.     </tr>
  102.     </tbody>
  103. </table>
  104. </body>
  105. </html>
  106. <script type="text/javascript">
  107.    $(function(){
  108.       $("#filterName").keyup(function(){
  109.         $("table tbody tr").hide().filter(":contains('"+($(this).val())+"')").show()
  110.       }).keyup();
  111.    })
  112. </script>

作者: fxbird   发布时间: 2010-03-20

find是查找子元素的吧
你非要用也是可以的啊
$("table tbody tr").hide();
$("table tbody").find("tr:contains('"+($(this).val())+"')").show();

作者: ywqbestever   发布时间: 2010-03-20

感觉效果差不多呀!?

作者: 火恋の神父   发布时间: 2010-03-22