往往有些时候，我们把数据从数据库读取出来，显示到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. perl一次读取多行文本的策略

    在处理文本时,经常遇到这种情况:就是我们须要把两行文本做一个比較,然后选择性输出. 而在while(<FILEHAND>){do something}程序块中默认仅仅能一次读取一行.笔者在 ...

  2. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

  3. [转载]Install Opera 12.16 Web Browser in CentOS/RHEL and Fedora

    FROM: http://tecadmin.net/install-opera-web-browser-in-centos-rhel-fedora/ Opera is an modern web br ...

  4. 2017.6.29 java读取.properties配置文件的几种方法

    参考来自:http://www.cnblogs.com/s3189454231s/p/5626557.html 关于路径的解释:http://blog.csdn.net/bluishglc/artic ...

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

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

  6. sql 查询重复的数据

    select * from yryz_role_partner where user_id in (select user_id from yryz_role_partner group by use ...

  7. www.mentalis.org/

    Top Downloads Here are the top downloads (within the last 24 hours): 1. Proxy2. IniReader3. ProxySoc ...

  8. 三分钟教你学Git(十三) - 二分查找

    比方说你收到了错误报告,然后你知道前几天明明是好的.可是这几天有好多新的commit被部署了.那么我们怎么迅速的找到第一个引入Bug的commit呢? 我们能够使用git bisect,git利用二分 ...

  9. 有效的web安全信息源

    杂志:hackcto ,书安 乌云知识库,91ri.org,安全脉搏(http://www.secpulse.com/) 乌云公开漏洞,乌云热点漏洞,90sec 内网渗透找90.web注入找习科, 已 ...

  10. javascript - 活动倒计时(天、时、分、秒)

    计数时: 结束时: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...