如何根据下拉选择的值过滤 html 表？

Question

我有一个包含一些数据行的 html 表，其中有一列名为状态。 有进行中、待办、已完成三种状态。 我在顶部有一个下拉菜单。 下拉列表包含任何、进行中、待办事项、已完成。 如何根据选定的下拉值加载数据。 下面我附上了我的页面的图片。

我的代码在下面。 表数据来自数据库。

<div class="table-wrapper">
    <div class="table-title">
    </div>
        <div class="table-filter">
            <div class="row">
                <div class="col-sm-3">
                    <div class="show-entries">
                        <span>Show</span>
                        <select class="form-control">
                            <option>5</option>
                            <option>10</option>
                        </select>
                        <span>entries</span>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="filter-group">
                        <label>Status</label>
                        <select class="form-control">
                            <option>Any</option>
                            <option>Completed</option>
                            <option>In Progress</option>
                            <option>To Run</option>
                        </select>
                    </div>
                <span class="filter-icon"><i class="fa fa-filter"></i></span>
                </div>
            </div>
        </div>
    <form method="post" action="activeInactive.php">
        <table class="paginated table table-striped table-hover">
            <thead>
                <tr>
                    <th>Test Name</th>
                    <th>Created By</th>
                    <th>Last updated</th>
                    <th>Test status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="test_table">

                <?PHP

                $test_access = 0;
                while($row = mysqli_fetch_array($tests_under_user)){    
                    echo '<td width=250px; title="'.$testName.'"><a href="">'.$row['name'].'</a></td>';
                    echo '<td title="'.$row['created'].'">'.$row['created'].'</td>';
                    echo '<td title="'.$row['edited'].'">'.$row['edited'].'</td>';
                    echo '<td>In Progress</td>';
                    echo '<td>';
                    echo '<a href="" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>';   
                    echo '<a href="" class="delete" name="delete" data-toggle="modal" Onclick="return ConfirmDelete()"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>';
                    echo '<a href="" class="copy" name="copy" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Copy" style="color: #2874A6">file_copy</i></a>';
                    echo '</td>';
                }
                ?>
            </tbody>
        </table>
    </form>
</div>

Answer 1

这可能对你有帮助。

访问 此处尝试使用 select 标签进行过滤。

 function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("mylist"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }

 * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #mylist { background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }

 <h2>My Customers</h2> <select id="mylist" onchange="myFunction()" class='form-control'> <option>A</option> <option>b</option> <option>c</option> </select> <table id="myTable"> <tr class="header"> <th style="width:60%;">Name</th> <th style="width:40%;">Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table>

Answer 2

由于您有大量数据，最好的方法是调用服务器并在 SQL 级别过滤数据。

通过这种方式，您可以向服务器询问特定页面和过滤器参数，并仅获取该数据，从而缩短响应时间。

此外，您不必担心客户端中的任何过滤逻辑。 您只需显示从服务器收到的数据。

---

更新：

如果你坚持在客户端做这个工作，你首先需要意识到<?PHP ?>里面的部分是在服务端渲染的。

在这种情况下，您需要将所有数据从服务器获取到可以像 JavaScript 对象一样运行过滤逻辑的东西（通常使用 AJAX 来获取 JSON 数据）。

获取数据并对其进行过滤后，您可以使用 JavaScript 动态创建表格行并更新分页数据。

有许多用于进行 AJAX 调用和模板化的 JavaScript 库和框架（例如Angular 、 React和Vue ），但您也可以使用 vanilla JavaScript 自己完成（参见AJAX 、 createElement和removeChild ）。

---

笔记

虽然 Aman Deep 的回答很有帮助，但在某些情况下它是缺乏的：

1. 当您有不止一页的结果时，您不能只更改显示属性。 您还需要某种机制来从下一页获取结果。
2. 如果您有一些应用于偶数行的 CSS，一旦您使用 display 属性进行过滤，您的渲染结果可能会混乱（参见 示例）。