使用Jquery本地搜索内容

最新推荐文章于 2022-12-22 13:51:44 发布

转载最新推荐文章于 2022-12-22 13:51:44 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/serchyan/p/7215559.html

本文介绍了一个简单的本地搜索功能实现，通过jQuery库实现表格数据的快速检索。代码中包含了HTML结构、样式设置及JavaScript交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/serchyan/p/7215559.html