往往有些时候，我们把数据从数据库读取出来，显示到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官方文档: DOTween起始上手起来很快,当然前提也是用心看一下哈. > 可以在Unity AssetStore下载得到. 使用方法: 准备: 在导入DOTween后,你需 ...

  2. Jsp中如何在<c:forEach>标签内获取集合的长度

    利用jstl标签functions的prefix属性的length属性值 1.首先在jsp页面导入jstl function标签 <%@ taglib prefix="fn" ...

  3. elasticsearch 基础性操作

    1 基础概念 Elasticsearch是一个近实时的系统,从你写入数据到数据可以被检索到,一般会有1秒钟的延时.Elasticsearch是基于Lucene的,Lucene的读写是两个分开的句柄,往 ...

  4. Centos 6安装 Jenkins

    前言 持续集成的概念 持续集成,Continuous integration ,简称CI. 持续集成正是针对这一类问题的一种软件开发实践.它倡导团队开发成员必须经常集成他们的工作,甚至每天都可能发生多 ...

  5. 点击Div，显示其innerHTML

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

  6. 当php懈垢windows通用上传缺陷

    转自独自等待博客 早上逛乌云发现了PKAV大牛的一篇文章,针对php和windows文件上传的分析,思路很YD,果断转之与大家分享. 虽然此文可能有许多的限制条件,但是如果你认真阅读会发现,其实还是比 ...

  7. 微信小程序 - 一种简写方式

    // 第一种 isOrder: function() { //code }, // 第二种 isOrders() { //code },

  8. vscode - 使用Settings进行同步扩展以及配置信息等

    1. 创建token(记住要复制上面的token): https://github.com/settings/tokens. 2. 创建gist id https://gist.github.com/ ...

  9. 关于Laravel5.2在php5.3.6X和在php7.1.10下的内存溢出

    php5.3.6X是编译安装,在debug模式下,频繁报出内存泄露警告 php7.1.10下则不会有此错误. 顺便提下:测试发现ThinkPHP也不会有该内存泄露警告! 希望知道如何解决该问题的童鞋能 ...

  10. Android实现炫酷SVG动画效果

    svg是眼下十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们能够直接用代码来描画图像,能够用不论什么文字处理工具打开svg图像.通过改变部分代码来使图像具有 ...