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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
React Native中Navigator的使用方法示例
Oct 13 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
javascript中闭包closure的深入讲解
Mar 03 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
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php魔术变量用法实例详解
2014/11/13 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
详解Python多线程
2016/11/14 Python
Python科学计算之Pandas详解
2017/01/15 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python exit出错原因整理
2020/08/31 Python
python3排序的实例方法
2020/10/20 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
银行工作检查书范文
2014/01/31 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫