原生JS 实现的input输入时表格过滤操作示例


Posted in Javascript onAugust 03, 2019

本文实例讲述了原生JS 实现的input输入时表格过滤操作。分享给大家供大家参考,具体如下:

需求:对input框进行键盘输入后根据输入的内容去匹配表格中指定的数据项,若存在相匹配的则只显示匹配的数据项;

细节处理:监听键盘输入后给一定的缓冲时间避免发生频繁的请求;

解决思路:给个定时器,当键盘开始输入时启动定时器,倘若在指定的时间内都不在进行输入操作,则执行匹配操作,否则取消操作,同时限定输入的字符串大于等于2位数字时再进行匹配操作,使过滤效果更精准一些。

<!--JS -->

var timer = null; //定义定时器
function filterTable(el){
  clearTimeout(timer);
  var oTable = document.getElementById("oTable");
  //获取需要匹配的元素集合
  var firstTdArr = oTable.getElementsByClassName("firstTd");
  if(el.value.length>1){ //限定匹配的字符至少为两位数
    var filterVal = el.value.toUpperCase();
    timer = setTimeout(function(){
      for(var i=0;i<firstTdArr.length;i++){
        //元素集合中存在匹配值时,显示匹配的记录,否则隐藏
        if (firstTdArr[i].innerHTML.toUpperCase().indexOf(filterVal) > -1) {
          firstTdArr[i].parentNode.style.display = "";
        }else{
          firstTdArr[i].parentNode.style.display = "none";
        }
      }
    },500);
  }else{
    //不满足匹配所需字符数量时,恢复匹配之前的模样
    for(var i=0;i<firstTdArr.length;i++){
      firstTdArr[i].parentNode.style.display = "";
    }
  }
}

<!-- HTML -->

<p><input type="text" οnkeyup="filterTable(this)"/></p>
<table id="oTable">
  <tr>
    <th>匹配数据</th>
    <th>数据项一</th>
    <th>数据项二</th>
    <th>数据项三</th>
  </tr>
  <tr>
    <td class="firstTd">JS前端数据多条件筛选</td>
    <td>11过滤table数据</td>
    <td>111过滤table数据</td>
    <td>1111过滤table数据</td>
  </tr>
  <tr>
    <td class="firstTd">程序员不会英语怎么行?</td>
    <td>22过滤table数据</td>
    <td>222过滤table数据</td>
    <td>2222过滤table数据</td>
  </tr>
  <tr>
    <td class="firstTd">前端代码编译后添加过滤</td>
    <td>33过滤table数据</td>
    <td>333过滤table数据</td>
    <td>3333过滤table数据</td>
  </tr>
  <tr>
    <td class="firstTd">大数据学习</td>
    <td>44过滤table数据</td>
    <td>444过滤table数据</td>
    <td>4444过滤table数据</td>
  </tr>
  <tr>
    <td class="firstTd">JS过滤HTML标签</td>
    <td>55过滤table数据</td>
    <td>555过滤table数据</td>
    <td>5555过滤table数据</td>
  </tr>
  <tr>
    <td class="firstTd">大数据你了解多少</td>
    <td>66过滤table数据</td>
    <td>666过滤table数据</td>
    <td>6666过滤table数据</td>
  </tr>
</table>

<!-- CSS3 -->

table{border: 1px solid #ccc;width: 900px;}
table tr:nth-child(odd){background:#F4F4F4;}
table tr:nth-child(even){background:#fff;}

<!-- 效果 -->

原生JS 实现的input输入时表格过滤操作示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
传智播客学习之JavaScript基础篇
Nov 13 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
JS请求servlet功能示例
Jun 01 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 #Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 #Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
小程序中英文混合排序问题解决
Aug 02 #Javascript
详解JWT token心得与使用实例
Aug 02 #Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 #Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 #Javascript
You might like
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
Javascript中神奇的this
2016/01/20 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
python做量化投资系列之比特币初始配置
2018/01/23 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
C#实现启动一个进程
2016/10/01 面试题
Linux机考试题
2015/10/16 面试题
会计职业生涯规划范文
2014/01/04 职场文书
学生操行评语大全
2014/04/24 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
在python中读取和写入CSV文件详情
2022/06/28 Python