原生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 学习笔记 element属性控制
Jul 23 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 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
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
简单的大学生自我鉴定
2014/02/18 职场文书
网络优化专员求职信
2014/05/04 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
作风转变年心得体会
2014/10/22 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
品德与社会教学反思
2016/02/24 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
APP界面设计技巧和注意事项
2022/04/29 杂记