js实现表格筛选功能

前端之家收集整理的这篇文章主要介绍了js实现表格筛选功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p style="text-align: center">

本应用就两个主要实现:

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

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

HTML代码

前台设计组前台开发组

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

javascript代码

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

});

下面是完整代码

<Meta charset="UTF-8"> 表格应用
Box">
Box-top"> 筛选: 姓名 性别 暂住地 前台设计组前台开发组后台设计组

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

猜你在找的JavaScript相关文章