往往有些时候，我们把数据从数据库读取出来，显示到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. 今天在CSDN看懂这个帖子，也是我的困惑，记录一下（过了三十的码农，你选择的是哪个，说出你的想法）

    http://bbs.csdn.net/topics/390944177 1.继续开发生涯,做资深码农,从senior.team lead.tech lead到principal,如果你无欲无求,可以 ...

  2. AcpectJ注释方式配置AOP

    1.AspectJ的概念   @AspectJ类似于Java注解的普通Java类   Spring可以使用AspectJ来做切入点解析   AOP的运行时仍旧是纯的Spring AOP,对Aspect ...

  3. 在vs2010中编译log4cxx-0.10.0具体方法（从下载、编译、解决错误具体介绍）

    一. 简单介绍 log4cxx是Java社区著名的log4j的c++移植版.用于为C++程序提供日志功能,以便开发人员对目标程序进行调试和审计,log4cxx是apache软件基金会的开源项目,基于A ...

  4. POJ 2388：Who&#39;s in the Middle

    Who's in the Middle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 31015   Accepted: 1 ...

  5. 【转】oracle建立本地数据库

    来到公司的这段时间,在项目的开发过程中一直连接的是远程的oracle数据库,现在开始轮到自己做毕业设计了,自己想采用Oracle数据库,就想建立本地的数据库. 当然了,首先是自己先装Oracle客户端 ...

  6. c#通过URL地址从服务器上下载文件

  7. nginx日志统计流量

    cat access.log |awk '{sum+=$10} END {print sum/1024/1024/1024}' $10是nginx字段bytes_sent 字段,根据自己的日志格式修改 ...

  8. vim 标签页管理

    一.打开关闭标签页 1. :tabnew  新建标签页 2. :tabc     关闭当前标签页 3. :tabo     关闭其他标签页保留当前标签页 4. :tabe file  在新标签页中打开 ...

  9. javascript 在js文件中获取路径

    如果在*.js文件中获取当自己当前的路径是很重要的. 举个例子,如果一个css文件中引用图片,如background-img: url('./Images/bg.png').那么图片的路径,是相对于c ...

  10. CentOs上搭建nginx

    目录 CentOs上搭建nginx 1. 在root环境下安装nginx 1.1 常用工具安装 1.2 关闭iptables规则 1.3 关闭SELinux 1.4 安装C/C++环境和PCRE库 1 ...