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

});

筛选：

姓名性别暂住地

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

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

html表格筛选,js实现表格筛选功能相关推荐

js php排序表格,原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点:call方法使用 sort方法深 ...
html表格查找,js实现表格数据搜索
本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下表格数据搜索名称城市 Alfreds Futterkiste Germany Berglunds snabbkop S ...
html生成自定义表格,自定义js的表格插件
场景:指定元素,生成自定义表格. 目的:了解js的插件开发. html代码: 自定义表格插件 var test = new MyTable({ elid:"mytable",//定 ...
计算机基础---03Excel篇(入门，身份证筛选出生年月，自动填充功能，表格排序，自动筛选，高级筛选，数据有效性，求和)
1.Excel 1.1 快速入门说明一:一个Excel工作簿可以有很多工作表,点击+可以添加工作表: 工作表重命名:双击或者右键重命名. 给工作表标签添加颜色:不同的工作表标签可以代表轻重缓急,代表 ...
wps合并所有sheet页_表格高级筛选、表格合并，让表格处理事半功倍
今天给大家介绍WPS最受欢迎的2个表格功能,表格合并和表格高级筛选. 这都是能够切实让工作事半功倍的功能,一定要掌握哦! 一.表格合并当我们有多个表格的内容需要合并到一个表格中,很多人会采取复制粘贴 ...
execl筛选去重_excel表格如何去除重复数据进行筛选
原标题:"Excel表格如何去除重复数据"的相关路由器设置教程资料分享.- 来源:191路由网. 我们有时候会遇到这样的一个情况,一些数据里面有一些重复的,我们想去除这些重复的数据 ...
筛选后系列填充_案例分享10——如何在筛选后的表格中粘贴数据（二）
首先要诚挚感谢一路关注和支持我的你们~ 今天凌晨,公众号关注量突破500,成功开通了流量主功能啦!相信细心的你们也注意到了文章底部的不同了~ 感谢大家的支持与肯定,我会从易到难,坚持分享Excel的操 ...
计算机表格怎样筛选男女,excel表格数据男女筛选-EXCEL表格中选择性别怎么做就是如何做筛选，比如......
如何将一张EXCEL表格中同时符合2个条件的数据筛选... 利用excel的数据有效性功能可以达到目标,以下步骤以excel2007为例. 1.首先在电脑上打开目标表格文件,选中目标单元格. 2.然后 ...
怎样在表格中选出同一类_excel表格怎么将相同内容筛选出来
1 excel 表格怎么将相同内容筛选出来在一张 EXCEL 表格中 , 有两列不同且数量众多的的文字 , 如何快速又简便挑出两列当中相同的文字 . ,接下来举例简单的例子告诉大家 Excel ...

html表格筛选,js实现表格筛选功能

html表格筛选,js实现表格筛选功能相关推荐

最新文章

热门文章