JS实现table表格内针对某列内容进行即时搜索筛选功能
时间:2019-04-14
本文章向大家介绍JS实现table表格内针对某列内容进行即时搜索筛选功能,主要包括JS实现table表格内针对某列内容进行即时搜索筛选功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了JS实现table表格内针对某列内容进行即时搜索筛选功能。分享给大家供大家参考,具体如下:
往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选。
而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器,降低用户体验度,这时,要是有个纯js操作,进行表格某列的即时筛选,这样既能提高搜索速度,也不用占用服务器资源,用户自然也满意。
实现如下,先看效果图,
开始状态:
在输入框内输入‘e',表格即时进行筛选,筛选表格内包含有‘e'的行,没有‘e'的进行隐藏,使用在线HTML/JS/css运行工具http://tools.jb51.net/code/HtmlJsRun,测试运行效果如下图所示:
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net JS搜索筛选table列</title> </head> <script type="text/javascript"> function onSearch(obj){//js函数开始 setTimeout(function(){//因为是即时查询,需要用setTimeout进行延迟,让值写入到input内,再读取 var storeId = document.getElementById('store');//获取table的id标识 var rowsLength = storeId.rows.length;//表格总共有多少行 var key = obj.value;//获取输入框的值 var searchCol = 0;//要搜索的哪一列,这里是第一列,从0开始数起 for(var i=1;i<rowsLength;i++){//按表的行数进行循环,本例第一行是标题,所以i=1,从第二行开始筛选(从0数起) var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行,列的值 if(searchText.match(key)){//用match函数进行筛选,如果input的值,即变量 key的值为空,返回的是ture, storeId.rows[i].style.display='';//显示行操作, }else{ storeId.rows[i].style.display='none';//隐藏行操作 } } },200);//200为延时时间 } </script> <body> <div > <input name="key" type="text" id="key" onkeydown="onSearch(this)" value="" /></div> <table width="200" border="1" id="store"><!-- id与函数的getId一致 --> <tr bgcolor="#CCCCCC"> <td>name</td> <td> </td> <td> </td> </tr> <td>good</td> <td> </td> <td> </td> </tr> <tr> <td>better</td> <td> </td> <td> </td> </tr> <tr> <td>best</td> <td> </td> <td> </td> </tr> <tr> <td>bad</td> <td> </td> <td> </td> </tr> <tr> <td>worse</td> <td> </td> <td> </td> </tr> <tr> <td>worst</td> <td> </td> <td> </td> </tr> </table> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- zabbix-server端与zabbix-agent端部署与监控
- 比特币是什么?比特币从何而来?
- Django内置Admin
- Python内置函数property()使用实例
- 区块链技术的历史发展的不同阶段
- 微信力推搜一搜,培养用户微信搜索习惯,搜一搜直接给红包
- datetime
- [转自JeffreyZhao]在LINQ to SQL中使用Translate方法以及修改查询用SQL
- Flask-SQLAlchemy
- 2017全球存储大会:存储设备面临三大挑战
- cobbler自动安装系统(Centos7.X)
- Python接口自动化-7-unittest
- cobbler自动安装系统(Centos7.X)
- Linux NTP时间服务器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 血泪教训,线程池引发的内存泄露
- RestTemplate设置转换类型
- 详解PROTOCOL BUFFERS
- Spring boot常用注解收集
- Go依赖模块版本之Module避坑使用详解
- 【tcl学习】vivado write_edif
- K8s中优雅停机和零宕机部署
- Python读取.edf格式脑电数据文件
- Kotlin修炼指南(三)——奇技淫巧
- 前端|CSS盒阴影和文字阴影
- 一文读懂Spring Boot各模块组件依赖关系
- 谈一谈|MkDocs介绍及应用
- 讲得最明白的Elasticsearch源码调试环境搭建教程
- 史上最全ThreadPoolExecutor梳理(下篇)
- JAVA|多Realm管理基础实现