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 相关文章推荐
JavaScript 程序编码规范
Nov 23 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
JS运算符简单用法示例
Jan 19 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
vue实现图片上传功能
May 28 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python快速从注释生成文档的方法
2016/12/26 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
购买大码女装:Lane Bryant
2016/09/07 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
计算机网络专业自荐信
2014/07/04 职场文书
刘公岛导游词
2015/02/05 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
关于 Python json中load和loads区别
2021/11/07 Python