原生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 相关文章推荐
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
读懂CommonJS的模块加载
Apr 19 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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
ajax实现无刷新分页(php)
2010/07/18 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
VUE重点问题总结
2018/03/19 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
好好学习保证书
2015/02/26 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python