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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
JQuery球队选择实例
May 18 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
浅谈js原生拖放
Nov 21 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 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
PHP 程序授权验证开发思路
2009/07/09 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python列表的逆序遍历实现
2020/04/20 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
优秀员工推荐信
2014/05/10 职场文书
投资意向书
2014/07/30 职场文书
党员个人总结自评
2015/02/14 职场文书
辅导员学期工作总结
2015/08/14 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python