jQuery页面搜索一个表格，将搜索到的行保存，其余行隐藏。
HTML代码：
- <!DOCTYPE html><html>
- <head>
- <meta charset="utf-8">
- <title>jQuery实现页面表格数据的搜索</title>
- <script src="js/jquery.min.js">
- </script>
- <script>
- $(function() {
- $("#search").click(function() {
- var txt = $("#searchName").val();
- if ($.trim(txt) != "") {
- $("table tr:not('#theader')").hide();
- $("table tr:not('#theader')").filter(":contains('" + txt + "')").show();
- } else {
- $("table tr:not('#theader')").show();
- }
- });
- })
- </script>
- </head>
- <body>
- <div class="table">
- <table>
- <tr id="theader">
- <th>姓名</th>
- <th>性别</th>
- <th>年龄</th>
- </tr>
- <tr>
- <td>张三</td>
- <td>女</td>
- <td>16</td>
- </tr>
- <tr>
- <td>李四</td>
- <td>男</td>
- <td>25</td>
- </tr>
- <tr>
- <td>王五</td>
- <td>男</td>
- <td>36</td>
- </tr>
- <tr>
- <td>孙七</td>
- <td>女</td>
- <td>45</td>
- </tr>
- <tr>
- <td>赵八</td>
- <td>女</td>
- <td>34</td>
- </tr>
- </table>
- <input type="text" id="searchName"/>
- <input type="button" value="搜索" id="search"/>
- </div>
- </body></html>
以上就是jQuery实现页面中表格数据的搜索的详细内容，更多关于jQuery实现页面中表格数据的搜索的资料请关注九品源码其它相关文章！