网站建设资讯

NEWS

网站建设资讯

js实现表格筛选功能

js实现表格筛选功能

创新互联是一家集网站建设,榕城企业网站建设,榕城品牌网站建设,网站定制,榕城网站建设报价,网络营销,网络优化,榕城网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

本应用就两个主要实现:

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

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

js实现表格筛选功能

HTML代码:

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

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

javascript代码:

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

下面是完整代码:




 
 表格应用
 




筛选:
姓名 性别 暂住地
前台设计组
张三浙江宁波
李四浙江宁波
胡歌浙江宁波
前台开发组
李三浙江宁波
张无忌浙江宁波
孔子浙江宁波
后台设计组
王五浙江宁波
单志永浙江宁波
刘粒粒浙江宁波

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!


本文名称:js实现表格筛选功能
网站路径:http://njwzjz.com/article/iheodc.html