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

前端  /  管理员 发布于 5年前   427

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

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

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

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

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 -1) {          firstTdArr[i].parentNode.style.display = "";        }else{          firstTdArr[i].parentNode.style.display = "none";        }      }    },500);  }else{    //不满足匹配所需字符数量时，恢复匹配之前的模样    for(var i=0;i
  
    
匹配数据
    
数据项一
    
数据项二
    
数据项三
  
  
    
JS前端数据多条件筛选
    
11过滤table数据
    
111过滤table数据
    
1111过滤table数据
  
  
    
程序员不会英语怎么行？
    
22过滤table数据
    
222过滤table数据
    
2222过滤table数据
  
  
    
前端代码编译后添加过滤
    
33过滤table数据
    
333过滤table数据
    
3333过滤table数据
  
  
    
大数据学习
    
44过滤table数据
    
444过滤table数据
    
4444过滤table数据
  
  
    
JS过滤HTML标签
    
55过滤table数据
    
555过滤table数据
    
5555过滤table数据
  
  
    
大数据你了解多少
    
66过滤table数据
    
666过滤table数据
    
6666过滤table数据
  
table{border: 1px solid #ccc;width: 900px;}table tr:nth-child(odd){background:#F4F4F4;}table tr:nth-child(even){background:#fff;}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools..net.cn/code/WebCodeRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
                                                                        
您可能感兴趣的文章:
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
js中过滤特殊字符的正则表达式
js过滤HTML标签以及空格的思路及代码
Javascript 5种方法实现过滤删除前后所有空格
js特殊字符过滤的示例代码
用js实现过滤script的正则
JS敏感词过滤代码
js过滤HTML标签完整实例
利用javascript/jquery对上传文件格式过滤的方法
用于过滤空白字符的几种常见的js正则表达式pattern
js限制input只能输入有效的数字(第一个不能是小数点)