首页 > 代码库 > 使用Jquery本地搜索内容

使用Jquery本地搜索内容

2024-11-01 14:53:39   206人阅读

 

一个小小的本地搜索功能，仅用于演示 更多运用还请自行思量，经个人测试可以使用（注意在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本地搜索内容


联系
我们