如何根据下拉选择的值过滤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

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

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

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

---

更新：

如果您坚持要在客户端进行工作，则首先需要意识到<?PHP ?>内部的部分是在服务器端进行的。

在这种情况下，您需要将来自服务器的所有数据放入可以在其上运行过滤逻辑的东西，例如JavaScript对象（通常使用AJAX来获取JSON数据）。

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

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

---

注意

尽管Aman Deep的回答很有帮助，但在某些情况下却缺乏：

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

Answer 2

这可能会对您有所帮助。

  

Visit here

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>