html/css/javascript您现在的位置是:主页 > html/css/javascript >
使用 JavaScript 快速搜索/过滤 HTML 表格
2023-02-16 17:37:20html/css/javascript 41人已围观
效果演示
效果代码
<!DOCTYPE html> <html lang="en-US"> <head> <title>JavaScript Table Filter Search</title> <style type="text/css"> h3 span { font-size: 22px; } h3 input.search-input { width: 300px; margin-left: auto; float: right } .mt32 { margin-top: 32px; } </style> </head> <body class="mt32"> <div class="container"> <h3> <span>JavaScript Filter Table Data</span> <input type="search" placeholder="Search..." class="form-control search-input" data-table="customers-list"/> </h3> <table class="table table-striped mt32 customers-list"> <thead> <tr> <th>Customer ID</th> <th>Name</th> <th>Email</th> <th>Postal Code</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Ana Trujillo</td> <td>Ana.trujillo@gmail.com</td> <td>050214</td> <td>Germany</td> </tr> <tr> <td>2</td> <td>Antonio Moreno</td> <td>antoniomoreno2@gmail.com</td> <td>12209</td> <td>Mexico</td> </tr> <tr> <td>3</td> <td>Maria Anders</td> <td>mariaanders@yahoo.com</td> <td>05021</td> <td>Germany</td> </tr> <tr> <td>4</td> <td>Thomas Hardy</td> <td>hardythomas.90@gmail.com</td> <td>WA1 1DP</td> <td>United Kingdom</td> </tr> <tr> <td>5</td> <td>Christina Berglund</td> <td>christina@outlook.com</td> <td>S-958 22</td> <td>Sweden</td> </tr> <tr> <td>6</td> <td>Davolio Nancy</td> <td>nancy.davolio@gmail.com</td> <td>810025</td> <td>India</td> </tr> <tr> <td>7</td> <td>Fuller Andrew</td> <td>andrew.10@yahoo.com</td> <td>W23 458</td> <td>United State</td> </tr> <tr> <td>8</td> <td>Leverling Janet</td> <td>leverling.j@gmail.com</td> <td>T5A 0B5</td> <td>Canada</td> </tr> </tbody> </table> </div> <script> (function (document) { 'use strict'; var TableFilter = (function (myArray) { var search_input; function _onInputSearch(e) { search_input = e.target; var tables = document.getElementsByClassName(search_input.getAttribute('data-table')); myArray.forEach.call(tables, function (table) { myArray.forEach.call(table.tBodies, function (tbody) { myArray.forEach.call(tbody.rows, function (row) { var text_content = row.textContent.toLowerCase(); var search_val = search_input.value.toLowerCase(); row.style.display = text_content.indexOf(search_val) > -1 ? '' : 'none'; }); }); }); } return { init: function () { var inputs = document.getElementsByClassName('search-input'); myArray.forEach.call(inputs, function (input) { input.oninput = _onInputSearch; }); } }; })(Array.prototype); document.addEventListener('readystatechange', function () { if (document.readyState === 'complete') { TableFilter.init(); } }); })(document); </script> </body> </html>
上一篇:三级折叠菜单
相关文章
随机图文
eyoucms多语言不支持哪些功能?
目前eyoucms不支持以下相关功能,相信官方经过多个版本更新迭代后,这些功能能够逐个解决。 不支持会员中心 不支持商城功能 不支持筛选功能 不支持自定义域名 不支持静态页面怎么查看eyoucms网站是哪个版本?
使用eyoucms搭建的网站出现了问题,想查看网站使用的是哪个版本,然后从官网下载对应的版本进行覆盖。 请问在哪里可以查看eyoucms的版本呢? 查看方法 找到网站目录中的这个文件/data/conf/version.txt,里边就显示该网站的程序版本。pbootcms可以用阿里云虚拟主机吗?
有客户问:pbootcms可以用阿里云虚拟主机吗? 可以的。 只要主机支持php+mysql及伪静态都可以。pbootcms清除删除冗余无用的图片
PbootCMS V3.2.2已经实现清理冗余图片功能,支持图片预览和选择图片手动删除。 有需要的朋友可以升级到PbootCMS V3.2.2+以上版本。 或者是下载官方最新版程序。