html表格筛选,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(); //，将符合条件的筛选出来

});

下面是完整代码：

表格应用

*{

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;

}

$(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(); //，将符合条件的筛选出来

});

});

筛选：

姓名性别暂住地

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

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