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 event使用方法详解
Apr 28 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
RequireJs的使用详解
Feb 19 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vuex实现数据状态持久化
Nov 11 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
vue实例的选项总结
Jun 09 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
JS 统计时间
2021/03/09 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
代码详解django中数据库设置
2019/01/28 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
俄罗斯商务邀请函
2014/01/26 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
文秘自荐信
2014/06/28 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
MySQL学习之基础操作总结
2022/03/19 MySQL
Go获取两个时区的时间差
2022/04/20 Golang