往往有些时候，我们把数据从数据库读取出来，显示到table里面，而此时来了个新需求，要在一个搜索框内输入关键字，表格的内容进行即时的筛选。

而即时触发进行数据库的查询，再回调显示，就显得慢，拖累服务器，降低用户体验度，这时，要是有个纯js操作，进行表格某列的即时筛选，这样既能提高搜索速度，也不用占用服务器资源，用户自然也满意。

实现如下，先看效果图，

开始状态：

在输入框内输入‘w’，表格即时进行筛选，筛选表格内包含有‘w’的行，没有‘w’的进行隐藏，原理就是这样：

实现代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Test js</title>
  6. </head>
  7. <script type="text/javascript">
  8. function onSearch(obj){//js函数开始
  9. setTimeout(function(){//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
  10. var storeId = document.getElementById('store');//获取table的id标识
  11. var rowsLength = storeId.rows.length;//表格总共有多少行
  12. var key = obj.value;//获取输入框的值
  13. var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起
  14. for(var i=1;i<rowsLength;i++){//按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）
  15. var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值
  16. if(searchText.match(key)){//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
  17. storeId.rows[i].style.display='';//显示行操作，
  18. }else{
  19. storeId.rows[i].style.display='none';//隐藏行操作
  20. }
  21. }
  22. },200);//200为延时时间
  23. }
  24. </script>
  25. <body>
  26. <div > <input name="key" type="text" id="key" onkeydown="onSearch(this)" value="" /></div>
  27. <table width="200" border="1" id="store"><!-- id与函数的getId一致 -->
  28. <tr bgcolor="#CCCCCC">
  29. <td>name</td>
  30. <td> </td>
  31. <td> </td>
  32. </tr>
  33. <td>good</td>
  34. <td> </td>
  35. <td> </td>
  36. </tr>
  37. <tr>
  38. <td>better</td>
  39. <td> </td>
  40. <td> </td>
  41. </tr>
  42. <tr>
  43. <td>best</td>
  44. <td> </td>
  45. <td> </td>
  46. </tr>
  47. <tr>
  48. <td>bad</td>
  49. <td> </td>
  50. <td> </td>
  51. </tr>
  52. <tr>
  53. <td>worse</td>
  54. <td> </td>
  55. <td> </td>
  56. </tr>
  57. <tr>
  58. <td>worst</td>
  59. <td> </td>
  60. <td> </td>
  61. </tr>
  62. </table>
  63. </body>
  64. </html>

js实现table内 某列的内容进行即时筛选的更多相关文章

  1. JS遍历Table的所有单元格内容

    用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: 这个方法的参数是唯一标识Table的id,用document对象的获取. function GetInfoFromTable(ta ...

  2. [Js/Jquery]table行转列

    摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适, ...

  3. js实现table合并相同列单元格

    /** * Created with JetBrains WebStorm. * User: Johnny * Date: 18-3-26 * Time: 下午4:48 * Table td 相同值合 ...

  4. js获取table中的列的数字的和

    function getTdValue(a) { var tableId = document.getElementById("tab"); var num; for(var i= ...

  5. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  6. 【js】将table的每个td的内容自动赋值给其title属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. table内 获取同一行 其他列的value

    table内  获取同一行 其他列的value function move(obj,ud){ var code = document.getElementById("reportName&q ...

  8. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  9. js实现table中前端搜索(模糊查询)

    项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下: ...

随机推荐

  1. DoTween 部分中文文档

    前言 DOTween现在还处于 alpha,所以还有一些缺失的功能(如路径插件,附加回调和其它的tween选项),这个文档在不久的将来可能会改变. 一.术语 Tweener 一个tween控制valu ...

  2. docker之人手一台服务器

    安装docker uname –r 检查内核版本 yum update 升级本地yum包 vim /etc/yum.repos.d/docker.repo #添加yum仓库配置 [dockerrepo ...

  3. 什么是HotSpot VM & 深入理解Java虚拟机 JVM

    参考 http://book.2cto.com/201306/25434.html 另外,这篇文章也是从一个系列中得出的: <深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)> ...

  4. django 分页django-pure-pagination

    虽然django自带了一个paginator,但不是很方便,我们使用django-pure-pagination github地址https://github.com/jamespacileo/dja ...

  5. gamma校正原理

    http://blog.csdn.net/u013286409/article/details/50239377 目录(?)[-]   图2中左图为原图,中图为gamma = 1/2.2在校正结果,原 ...

  6. 智能选择器和语义化的CSS

    本文由白牙根据Heydon Pickering的<Semantic CSS With Intelligent Selectors>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之 ...

  7. swftools使用

    为了支持gif转swf以及pdf转swf.编译swftools过程中遇见几个问题,记录一下. 首先下载swftools:http://www.swftools.org/ 它依赖几个包,这里我使用的版本 ...

  8. How to Check some table was locked

    select * from sys.sysprocesses where blocked<>0  看看waittime是不是很大  kill spid

  9. Laravel之事件

    一.事件 事件无处不在,比如用户登录.购买商品.搜索.查看文章,等等,都是事件,有了事件,就有事件监听器,事件监听器监听到事件发生后会执行一些操作,Laravel使用观察者模式来实现这种监听机制.本节 ...

  10. Win8.1应用开发之Bing Maps

    这里介绍怎样进行Bing Maps的开发.首先我们须要在我们的程序中引入Bing Map的SDK.详细方法,这里推荐一个链接<win8>使用Bing地图.这样一个hello world便出 ...