往往有些时候，我们把数据从数据库读取出来，显示到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. Makefile学习之显示命令与出错命令

    显示命令: 1.在makefile中 如果在命令行下添加“@”符号,则只执行,不显示命令: 2.在执行make时,make -n 表示只显示命令而不执行: make -s 表示只执行命令而不显示: 3 ...

  2. linux字符设备文件的打开操作

    2.7  字符设备文件的打开操作(1) 作为例子,这里假定前面对应于/dev/demodev设备节点的驱动程序在自己的代码里实现了如下的struct file_operations对象fops: st ...

  3. Spark jdbc postgresql数据库连接和写入操作源代码解读

    概述:Spark postgresql jdbc 数据库连接和写入操作源代码解读.具体记录了SparkSQL对数据库的操作,通过java程序.在本地开发和执行.总体为,Spark建立数据库连接,读取数 ...

  4. 面试——谈谈对JAVA的理解

    谈谈你对Java平台的理解.答:Java首先是一种面向对象的语言,语言特性有封装,继承,多态,泛型,Lamda表达式等; 第二个特性:支持跨平台,一次书写导出运行(write once,run any ...

  5. postman（一）批量执行接口测试用例

    postman(一)批量执行接口测试用例 学习了:https://blog.csdn.net/github_36032947/article/details/78611405 还可以把collecti ...

  6. Json序列化为对象方法

    /// <summary>/// json 序列化为对象/// </summary>/// <typeparam name="T">对象类型&l ...

  7. EffectiveJava（16）复合优先于继承

    为什么复合优先于继承? 1.继承违反了封装原则,打破了封装性 2.继承会不必要的暴露API细节,称为隐患.比如通过直接访问底层使p.getProperty(K,V)的键值对可以不是String类型 3 ...

  8. Android中IntentService详解

    简单说,IntentService是继承于Service并处理异步请求的一个类,在IntentService内有一个工作线程来处理耗时操作,启动IntentService的方式和启动传统Service ...

  9. Codeforces Round #262 (Div. 2)解题报告

    详见:http://robotcator.logdown.com/posts/221514-codeforces-round-262-div-2 1:A. Vasya and Socks   http ...

  10. Linux——Django 开发环境部署（二）python版本控制器pyenv

    python版本控制器pyenv 之前的 那篇是说明了django环境的site package完全独立出来了,但是使用的python解释器还是系统的,为了继续独立出来,甚至是达到ruby的rvm的自 ...