JS实现table表格内针对某列内容进行即时搜索筛选功能


Posted in Javascript onMay 11, 2018

本文实例讲述了JS实现table表格内针对某列内容进行即时搜索筛选功能。分享给大家供大家参考,具体如下:

往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选。

而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器,降低用户体验度,这时,要是有个纯js操作,进行表格某列的即时筛选,这样既能提高搜索速度,也不用占用服务器资源,用户自然也满意。

实现如下,先看效果图,

开始状态:

JS实现table表格内针对某列内容进行即时搜索筛选功能

在输入框内输入‘e',表格即时进行筛选,筛选表格内包含有‘e'的行,没有‘e'的进行隐藏,使用在线HTML/JS/css运行工具http://tools.3water.com/code/HtmlJsRun,测试运行效果如下图所示:

JS实现table表格内针对某列内容进行即时搜索筛选功能

实现代码:

<!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>3water.com 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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
微信小程序 slot踩坑的解决
Apr 01 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
Vue.js仿Select下拉框效果
Feb 18 Javascript
node前端开发模板引擎Jade的入门
May 11 #Javascript
Node.js 使用jade模板引擎的示例
May 11 #Javascript
Node.js Express安装与使用教程
May 11 #Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 #Javascript
Node.js引入UIBootstrap的方法示例
May 11 #Javascript
Node.js使用Angular简单示例
May 11 #Javascript
Node.js 使用AngularJS的方法示例
May 11 #Javascript
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php绘制圆形的方法
2015/01/24 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
Javascript的一种模块模式
2008/03/22 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Python读写unicode文件的方法
2015/07/10 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python实现上传下载文件功能
2020/11/19 Python
《Python学习手册》学习总结
2018/01/17 Python
python pytest进阶之fixture详解
2019/06/27 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python输出决策树图形的例子
2019/08/09 Python
python getpass实现密文实例详解
2019/09/24 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
悬挂训练绳:TRX
2017/12/14 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
党员演讲稿
2014/09/04 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python