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实现html页面 div 假分页有原理有代码
Sep 06 Javascript
JScript中的条件注释详解
Apr 24 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
详解JS ES6编码规范
May 07 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
jQuery实现聊天对话框
2020/02/08 jQuery
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
Vita Fede官网:在意大利手工制作,在纽约市设计
2019/10/25 全球购物
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
停电通知范文
2015/04/16 职场文书
行政上诉状范文
2015/05/23 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery