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 相关文章推荐
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
JavaScript实现五子棋小游戏
Oct 26 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从数据库查询结果生成树形列表的方法
2015/04/17 PHP
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
煤矿安全生产月活动总结
2014/07/05 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
办理房产过户的委托书
2014/09/14 职场文书
开天辟地观后感
2015/06/09 职场文书
技术转让协议书
2016/03/19 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle