jQuer实时监控input对table进行筛选
记得以前写过一个预定表格~~~~~比这个更难,一大串前端js~~~忘了~~~好记性不如烂笔头~~记录下,既帮助别人,也帮助自己~~~
实现思路~通过.on监听input标签的内容变化,通过this获取到val,通过.hide隐藏未匹配标签~~~大致这样
- oninput是HTML5的标准事件
- 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化,
- 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发
- oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代
- 使用jQuery库的话直接使用on同时绑定这两个事件即可。
<input type="text" class="form-control" id="item_keyword"
name="item_keyword" placeholder="请输入关键字查找">
input代码
<script src="/static/js/jquery-3.1.1.min.js"></script>
<script >
/* 实时搜索框,及点击按钮全选\取消*/
$('#item_keyword').on('input propertychange', function() {
console.log( $(this).val());
$('table tbody tr').hide()
.filter(":contains('" + ($(this).val()) + "')")
.show();
});
</script>
JS代码
jQuer实时监控input对table进行筛选的更多相关文章
- 移动端(html5)微信公众号下用keyup实时监控input值的变化无效
搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...
- 实时监控input输入值变化
在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦 ...
- 改造断路器集群监控Hystrix Turbine实现自动注册消费者、实时监控多个服务
在上一篇文章中,我们搭建了Hystrix Dashoard,对指定接口进行监控.但是只能对一个接口进行监听,功能比较局限: Turbine:汇总系统内多个服务的数据并显示到 Hystrix Dashb ...
- Spotlight实时监控Windows Server 2008
Windows Server 2008作为服务器平台已逐渐被推广和应用,丰富的功能和良好的稳定性为其赢得了不错的口碑.但是和Windows Server 2003相比,其系统的自我监控功能并没有多大的 ...
- C#实现对文件目录的实时监控
本文主要描述如何通过C#实现实时监控文件目录下的变化,包括文件和目录的添加,删除,修改和重命名等操作. 首先,我们需要对.net提供的FileSystemWatcher类有所了解.我有些懒,找了MSD ...
- java利用WatchService实时监控某个目录下的文件变化并按行解析(注:附源代码)
首先说下需求:通过ftp上传约定格式的文件到服务器指定目录下,应用程序能实时监控该目录下文件变化,如果上传的文件格式符合要求,将将按照每一行读取解析再写入到数据库,解析完之后再将文件改名. 一. 一开 ...
- 【转】Spotlight实时监控Windows Server 2008
Windows Server 2008作为服务器平台已逐渐被推广和应用,丰富的功能和良好的稳定性为其赢得了不错的口碑.但是和Windows Server 2003相比,其系统的自我监控功能并没有多大的 ...
- JQuery实时监控文本框字符变化
$(function(){ $('input[name="addr"]').on('input propertychange', function() { if ($('input ...
- Jmeter实时监控+SpringBoot接口性能实战
性能测试 Jmeter实时监控+SpringBoot接口性能实战 自动化 SpringBoot Java Jmeter实时监控+SpringBoot接口性能实战 一.实验目的及实验环境 1.1.实验目 ...
随机推荐
- 【短道速滑一】OpenCV中cvResize函数使用双线性插值缩小图像到长宽大小一半时速度飞快(比最近邻还快)之异象解析和自我实现。
今天,一个朋友想使用我的SSE优化Demo里的双线性插值算法,他已经在项目里使用了OpenCV,因此,我就建议他直接使用OpenCV,朋友的程序非常注意效率和实时性(因为是处理视频),因此希望我能测试 ...
- 《面试经典系列》- MySQL数据库存储引擎
一.MySQL有多少种存储引擎? 在MySQL5之后,支持的存储引擎有十多个,但是我们常用的就那么几种,而且,默认支持的也是 InnoDB. 通过命令:show engines \g,我们可以查看到当 ...
- Range Module
2019-09-21 18:54:16 715. Range Module 问题描述: 问题求解: 用线段树解决了. class RangeModule { Node root; class Node ...
- GBDT梯度提升树算法及官方案例
梯度提升树是一种决策树的集成算法.它通过反复迭代训练决策树来最小化损失函数.决策树类似,梯度提升树具有可处理类别特征.易扩展到多分类问题.不需特征缩放等性质.Spark.ml通过使用现有decisio ...
- 使用PyTorch建立图像分类模型
概述 在PyTorch中构建自己的卷积神经网络(CNN)的实践教程 我们将研究一个图像分类问题--CNN的一个经典和广泛使用的应用 我们将以实用的格式介绍深度学习概念 介绍 我被神经网络的力量和能力所 ...
- 使用SlimYOLOv3框架实现实时目标检测
介绍 人类可以在几毫秒内在我们的视线中挑选出物体.事实上,你现在就环顾四周,你将观察到周围环境并快速检测到存在的物体,并且把目光回到我们这篇文章来.大概需要多长时间? 这就是实时目标检测.如果我们能让 ...
- PyTorch Hub发布!一行代码调用最潮模型,图灵奖得主强推
为了调用各种经典机器学习模型,今后你不必重复造轮子了. 刚刚,Facebook宣布推出PyTorch Hub,一个包含计算机视觉.自然语言处理领域的诸多经典模型的聚合中心,让你调用起来更方便. 有多方 ...
- TensorFlow系列专题(十一):RNN的应用及注意力模型
磐创智能-专注机器学习深度学习的教程网站 http://panchuang.net/ 磐创AI-智能客服,聊天机器人,推荐系统 http://panchuangai.com/ 目录: 循环神经网络的应 ...
- 在C#MVC三层项目中如何使用SprintNet
0.添加dll文件 1.首先在根目录下新建一个文件夹[Config],然后新建2两个xml文件. 1-1[controllers.xml]用来配置需要创建的对象 1-2[service.xml]用来配 ...
- Java常用类__装箱/拆箱
以下是常用的各两种方法(各类提供了构造方法,静态方法) 一.基本数据类型 转化为 包装类(装箱) 例:int i=10: Integer num=i;//num=10 二.包装类 转化为 基本数据类 ...