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 相关文章推荐
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
jQuery使用方法
Feb 04 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
Vue中的字符串模板的使用
May 17 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
超详细小程序定位地图模块全系列开发教学
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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
纯php生成随机密码
2015/10/30 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
用js得到网页中所有的div的id
2020/10/19 Javascript
JS 对象介绍
2010/01/20 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
Vue表单实例代码
2016/09/05 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
深入理解vue Render函数
2017/07/19 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python获取一组汉字拼音首字母的方法
2015/07/01 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
用python找出那些被“标记”的照片
2017/04/20 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
学校四群教育实施方案
2014/06/12 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
小学中队活动总结
2015/05/11 职场文书
就业推荐表院系意见
2015/06/05 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python