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>

上一篇：三级折叠菜单

下一篇：wordpress 为自定义类型文章新增自定义字段

相关文章

随机图文

本栏推荐

pbootcms后台文章列表修改为按照发布时间排序

猜你喜欢

联系微信