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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 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代码
2008/04/09 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Python新手学习标准库模块命名
2020/05/29 Python
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
酒店销售主管岗位职责
2014/01/04 职场文书
老师对学生的评语
2014/04/18 职场文书
保安公司服务承诺书
2014/05/28 职场文书
摄影展策划方案
2014/06/02 职场文书
食品安全处置方案
2014/06/14 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书