javascript 如何根据下拉选择的值过滤 html 表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51515778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to filter an html table based on drop down selected value?
提问by Prajna Hegde
I have a html table with some rows of data which has a column called status. There are three status they are In progress, To do, Completed. I have a drop down at the top. The drop down contains Any,In progress, To do, Completed. How can I load the data based on the selected drop down value. Here below I have attached an image of my page.
我有一个包含一些数据行的 html 表，其中有一列名为状态。有进行中、待办、已完成三种状态。我在顶部有一个下拉菜单。下拉列表包含任何、进行中、待办事项、已完成。如何根据选定的下拉值加载数据。下面我附上了我的页面的图片。
My code is here below. Table data is coming from database.
我的代码在下面。表数据来自数据库。
<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"></i></a>';
echo '<a href="" class="delete" name="delete" data-toggle="modal" Onclick="return ConfirmDelete()"><i class="material-icons" data-toggle="tooltip" title="Delete"></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>
回答by Aman Deep
This may help you.
这可能对你有帮助。
Visit hereto try filtering with select tag.
访问此处尝试使用选择标签进行过滤。
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>回答by Oram
Since you have lots of data, the best way to go is by making a call to the server and filter the data on the SQL level.
由于您有大量数据，最好的方法是调用服务器并在 SQL 级别过滤数据。
This way you can ask the server for a specific page and your filter parameters and get only that data, making the response time a lot smaller.
通过这种方式，您可以向服务器询问特定页面和过滤器参数，并仅获取该数据，从而缩短响应时间。
Additionally, you don't have to worry about any filtering logic in the client side. You just show the data you receive from the server.
此外，您不必担心客户端中的任何过滤逻辑。您只需显示从服务器收到的数据。
Update:
更新：
If you insist on doing the work on the client side, you first need to realize that the part inside of <?PHP ?>is rendered on the server side.
如果你坚持在客户端做这个工作，你首先需要意识到里面的部分<?PHP ?>是在服务端渲染的。
In this case, you need to get all the data from the server into something you can run filtering logic on like a JavaScript object (usually using AJAX to get JSON data).
在这种情况下，您需要将所有数据从服务器获取到可以像 JavaScript 对象一样运行过滤逻辑的东西（通常使用 AJAX 获取 JSON 数据）。
After you got the data and filtered it you can use JavaScript to dynamically create the table rows and update the pagination data.
获取数据并对其进行过滤后，您可以使用 JavaScript 动态创建表格行并更新分页数据。
There are numerous JavaScript libraries and frameworks for making AJAX calls and for templating (e.g. Angular, Reactand Vue), but you can also do it yourself with vanilla JavaScript (see AJAX, createElementand removeChild).
有许多用于进行 AJAX 调用和模板化的 JavaScript 库和框架（例如Angular、React和Vue），但您也可以使用 vanilla JavaScript 自己完成（参见AJAX、createElement和removeChild）。
Note
笔记
While Aman Deep's answer was helpful, there are a cases in which it is lacking:
虽然 Aman Deep 的回答很有帮助，但在某些情况下它是缺乏的：
- When you have more than one page of results you can't just change the display property. You will also need some mechanism to get results from the next pages.
- If you have some CSS that is applied to even lines, once you filter using the display property your rendered result might be messed up (see example).
- 当您有不止一页的结果时，您不能只更改显示属性。您还需要某种机制来从下一页获取结果。
- 如果您有一些应用于偶数行的 CSS，一旦您使用 display 属性进行过滤，您的渲染结果可能会混乱（参见示例）。
