js实现表格筛选功能

2019-11-19 17:53:01

字体：大中小

来源：转载

供稿：网友

本应用就两个主要实现：

1.表格的id 和 class之间的命名关系

请看图：将组名和个人信息联表格联系起来，这样会很好的操作表格

HTML代码：

   <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>   <tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_01"><td>李四</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_01"><td>胡歌</td><td>男</td><td>浙江宁波</td></tr>   <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>   <tr class="child_row_02"><td>李三</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_02"><td>张无忌</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_02"><td>孔子</td><td>男</td><td>浙江宁波</td></tr>

2.就是筛选功能的使用：使用filter联合contains将输入框的字加入contains进行筛选

javascript代码：

 //设置列表查询 $("#filterName").keyup(function () {  $("table tbody tr").stop().hide() //将tbody中的tr都隐藏    .filter(":contains('"+($(this).val())+"')").show(); //，将符合条件的筛选出来    });

下面是完整代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格应用</title> <style>  *{   margin: 0;   padding: 0;  }  .box{   border: 1px solid #000;   margin:50px auto;   width: 340px;   padding: 10px 10px;  }  .box table{   margin: auto;  }  .box .box-top{   width: 303px;   margin: 5px auto;  }  .box table tr td,th{   padding: 5px 30px;   text-align: center;  }  .box table .parent{   background: lightgray;  }  .selected{   background: gray !important;  }  .selectHeight{   background: darkseagreen !important;  } </style></head><body><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script> $(function () {  //默认让王五选中  $("tr:contains('王五')").addClass("selectHeight")  //点击让其展示出列表 默认让其都隐藏  $(".box tr.parent").click(function () {   $(this)    .toggleClass("selected")    .siblings(".child_"+this.id).stop().toggle();  }).click();//此行代码表示要立即执行  //设置列表查询  $("#filterName").keyup(function () {   $("table tbody tr").stop().hide() //将tbody中的tr都隐藏    .filter(":contains('"+($(this).val())+"')").show(); //，将符合条件的筛选出来  }); });</script><div class="box"> <div class="box-top">  <span>筛选：</span><input type="text" id="filterName"> </div> <table>  <thead>   <tr>    <th>姓名</th>    <th>性别</th>    <th>暂住地</th>   </tr>  </thead>  <tbody>   <tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>   <tr class="child_row_01"><td>张三</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_01"><td>李四</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_01"><td>胡歌</td><td>男</td><td>浙江宁波</td></tr>   <tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>   <tr class="child_row_02"><td>李三</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_02"><td>张无忌</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_02"><td>孔子</td><td>男</td><td>浙江宁波</td></tr>   <tr class="parent" id="row_03"><td colspan="3">后台设计组</td></tr>   <tr class="child_row_03"><td>王五</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_03"><td>单志永</td><td>男</td><td>浙江宁波</td></tr>   <tr class="child_row_03"><td>刘粒粒</td><td>男</td><td>浙江宁波</td></tr>  </tbody> </table></div></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：原生js实现回复评论功能

下一篇：js放大镜放大购物图片效果