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