js实现筛选功能


Posted in Javascript onNovember 24, 2020

本文实例为大家分享了js实现筛选功能的具体代码,供大家参考,具体内容如下

功能

通过复选框对显示内容进行筛选,如,勾选后仅显示在线用户。

js实现筛选功能

js实现筛选功能

代码

js

※需 jQuery。

function filter() {
 var check =document.getElementById('checkbox');
 var members = $('.member');
 var status = $('.memberStatus');
 if (check.checked) {
 members.each(function(i, member) {
 if (status[i].innerText == 'Offline') {
 member.style.display = 'none';
 }
 });
 } else {
  members.each(function(i, member) {
   member.style.display = '';
  });
 }
}

html

<input type="checkbox" name="onlineOnly" tabindex="0" id="checkbox" onclick="filter()">
<span>Show online users only</span>
<table>
 <tr class="member">
 <td>
  UserA
 </td>
 <td class="memberStatus">
  Online
 </td>
 </tr>
 <tr class="member">
 <td>
  UserB
 </td>
 <td class="memberStatus">
  Offline
 </td>
 </tr>
 <tr class="member">
 <td>
  UserC
 </td>
 <td class="memberStatus">
  Online
 </td>
 </tr>
</table>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
js原型链原理看图说明
Jul 07 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
超详细小程序定位地图模块全系列开发教学
Nov 24 #Javascript
JavaScript实现移动端拖动元素
Nov 24 #Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 #Javascript
js实现抽奖功能
Nov 24 #Javascript
前端 javascript 实现文件下载的示例
Nov 24 #Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 #Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
在django中,关于session的通用设置方法
2019/08/06 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Python Map 函数的使用
2020/08/28 Python
python3 kubernetes api的使用示例
2021/01/12 Python
C#实现启动一个进程
2016/10/01 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
校长创先争优承诺书
2014/08/30 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
团结主题班会
2015/08/13 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers