js实现表格筛选功能

本应用就两个主要实现：

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

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

HTML代码：

   前台设计组
   张三男浙江宁波
   李四男浙江宁波
   胡歌男浙江宁波
   前台开发组
   李三男浙江宁波
   张无忌男浙江宁波
   孔子男浙江宁波

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

javascript代码：

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

下面是完整代码：

 
 
 





 

  筛选：
 
 

  

   

    
姓名
    
性别
    
暂住地
   
  
  

   
前台设计组
   
张三
男
浙江宁波
   
李四
男
浙江宁波
   
胡歌
男
浙江宁波
   
前台开发组
   
李三
男
浙江宁波
   
张无忌
男
浙江宁波
   
孔子
男
浙江宁波
   
后台设计组
   
王五
男
浙江宁波
   
单志永
男
浙江宁波
   
刘粒粒
男
浙江宁波
  
 

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