码迷,mamicode.com
首页 > Web开发 > 详细

使用Jquery本地搜索内容

时间:2017-07-21 10:42:27      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:min   text   enter   char   height   mit   htm   tab   引入   

 

一个小小的本地搜索功能,仅用于演示 更多运用还请自行思量,经个人测试可以使用(注意在head引入 Jquey库

 1 <html>
 2 
 3 <head>
 4 
 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 6 
 7 
 8 
 9 <title>本地搜索</title>
10 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
11 <style>
12     table{width:700px; border:1px solid #abcdef; border-collapse:collapse; }
13     tr{height: 30px;}
14     th,td{border: 1px solid #abcdef; text-align:center;}
15 </style>
16 
17 </head>
18 
19 <body>
20 <table>
21     <tr id="header">
22         <th>姓名</th>
23         <th>性别</th>
24         <th>电话</th>
25     </tr>
26     <tr>
27         <td>张三</td>
28         <td></td>
29         <td>13965423687</td>
30     </tr>
31     <tr>
32         <td>李四</td>
33         <td></td>
34         <td>18678953258</td>
35     </tr>
36 
37     <tr>
38         <td>移动客服</td>
39         <td></td>
40         <td>10086</td>
41     </tr>
42     <tr>
43         <td>移动充值</td>
44         <td></td>
45         <td>13800138000</td>
46     </tr>
47 
48 
49 </table>
50 </br>
51 <input type="text" name="" id="inserter"/>
52 <input type="button" name="" id="dosubmit" value="搜索"/>
53 
54 
55 
56 </body>
57 </html>
58 <script type="text/javascript">
59 $(document).ready(function(){
60      $("input[type=button]").click(function(){
61      
62      var valu = $("#inserter").val();
63      $("table tr:not(‘#header‘)").hide().filter(:contains("+valu+")).show();
64      
65      });
66 });
67 </script>

 

使用Jquery本地搜索内容

标签:min   text   enter   char   height   mit   htm   tab   引入   

原文地址:http://www.cnblogs.com/serchyan/p/7215559.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!