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