如何使用 JavaScript 过滤 HTML 表格（在 HTML 表格上搜索）

最新推荐文章于 2024-09-10 09:17:26 发布

allway2

最新推荐文章于 2024-09-10 09:17:26 发布

阅读量2.5k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/allway2/article/details/123907035

版权

这是一个使用 JavaScript 快速过滤 HTML 表格的解决方案。有时您必须显示大量的 HTML 表格记录，并且您必须在搜索框中按类型快速搜索记录。今天我们分享纯 JavaScript 代码来轻松过滤表记录。

JavaScript 是一种非常强大的脚本语言，可以在客户端执行。通过JavaScript，我们可以找到并过滤记录。今天的课程您将学习使用 JavaScript 为 HTML 表格创建过滤器选项。您可以仅通过单个搜索框搜索任何列。此外，这种 JavaScript 编写的代码实际上行数更少，并且不会影响任何其他功能。

使用 JavaScript 快速搜索/过滤 HTML 表格

这是一个 HTML Table 元素和一个用于搜索的输入文本字段。此外，我们使用 Bootstrap 4 创建页面布局。在表格元素中，我们添加了一些示例数据。您可以按客户 ID、姓名、电子邮件、邮政编码和国家/地区进行搜索。

<tr>简单地用,制作的 HTML 表格<td>。在此表中，我们添加了一个customers-list将与搜索字段进行映射的类。你可以看到我们添加了属性data-table="customers-list"来过滤customers-list类表。现在让我们继续 JavaScript，在这里我们创建一个名为"search_input". readystatechange当页面加载完成时（在我们的代码事件中），下一步初始化 JavaScript 函数。当在搜索字段中键入任何文本时，JavaScript 将使用forEach循环检测并查找表格行。因此，我们可以使用轻量级代码归档此表过滤器功能。

在这里，我们创建了一个 HTML 文件。其中包含 HTML、CSS 和 JavaScript 代码。但是，您可以创建单独的文件。

<!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>

以下是使用 JavaScript 过滤 HTML 表格的演示。