其他分享
首页 > 其他分享> > 表格内容筛选

表格内容筛选

作者:互联网

利用 contains 选择器结合 jQuery 的 filter() 筛选方法,可以实现表格的过滤。

filter() 方法:

语法为:

$(selector).filter(criteria,function(index))
 

参数说明:

例子:

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>         <script type="text/javascript" src="jquery-3.3.1.js"></script>     </head>     <body>         <div>         <br />             筛选:<input id="filterName" />             <br />         </div>         <table>             <thead>                 <tr>                     <th>姓名</th>                     <th>性别</th>                     <th>暂住地</th>                 </tr>             </thead>             <tbody>                 <tr>                     <td>张一</td>                     <td>男</td>                     <td>浙江宁波</td>                 </tr>                 <tr>                     <td>张二</td>                     <td>女</td>                     <td>浙江杭州</td>                 </tr>                 <tr>                     <td>张三</td>                     <td>男</td>                     <td>湖南长沙</td>                 </tr>                 <tr>                     <td>李四</td>                     <td>男</td>                     <td>浙江温州</td>                 </tr>                 <tr>                     <td>李五</td>                     <td>男</td>                     <td>浙江杭州</td>                 </tr>                 <tr>                     <td>李六</td>                     <td>女</td>                     <td>浙江杭州</td>                 </tr>                 <tr>                     <td>王七</td>                     <td>男</td>                     <td>浙江杭州</td>                 </tr>                 <tr>                     <td>王八</td>                     <td>女</td>                     <td>浙江杭州</td>                 </tr>                 <tr>                     <td>王九</td>                     <td>男</td>                     <td>湖南长沙</td>                 </tr>             </tbody>         </table>         <script type="text/javascript">             $(document).ready(function(){                 $('#filterName').keyup(function(){                     $('table tbody tr')                         .hide()                         .filter(":contains('" + $(this).val() + "')")                         .show();                 });             });         </script>     </body> </html>

标签:function,index,表格,元素,filter,内容,浙江,筛选,方法
来源: https://www.cnblogs.com/goodgongdstudy/p/14704818.html