zoukankan      html  css  js  c++  java
  • 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代码
  • 相关阅读:
    PHP中的闭包详解
    PHPDoc 学习记录
    php中注释有关内容
    命名空间 转
    php命名空间学习笔记。
    php命名空间详解
    命名空间
    php作用域限定符
    nginx负载均衡
    naginx安装入门
  • 原文地址:https://www.cnblogs.com/Dream-huang/p/10883108.html
Copyright © 2011-2022 走看看