📅 最后修改于: 2023-12-03 15:31:17.841000 🧑 作者: Mango
在web应用程序中, 通常会使用表格来展示数据。 但是，如果数据非常庞大，以至于难以处理。 这时，我们建议使用HTML表格列过滤器下拉列表来筛选所需数据。
以下是 HTML 表格列过滤器下拉列表的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 表格列过滤器下拉列表</title>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Charlie</td>
<td>35</td>
</tr>
<tr>
<td>4</td>
<td>Dave</td>
<td>40</td>
</tr>
<tr>
<td>5</td>
<td>Eva</td>
<td>45</td>
</tr>
</tbody>
</table>
<br><br>
<select id="colFilter" onchange="filterTable()">
<option value="">请选择要筛选的列</option>
<option value="0">编号</option>
<option value="1">姓名</option>
<option value="2">年龄</option>
</select>
<script>
function filterTable() {
var input, filter, table, tr, td, i, j;
input = document.getElementById("colFilter");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j]) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
break;
} else {
tr[i].style.display = "none";
}
}
}
}
}
</script>
</body>
</html>
<select> 标记定义了下拉列表，它让用户从预定义选项中进行选择。onchange 事件指定了当下拉列表的值发生更改时，将自动调用 filterTable 函数。filterTable 函数在表格中搜索列以查找指定的搜索文本，并根据搜索结果设置表格行的显示状态。toUpperCase() 方法把字符串转换为大写。indexOf() 方法从字符串对象中检索出指定的字符串值，并返回其位置。style.display = "none"; 隐藏元素。使用 HTML 表格列过滤器下拉列表是一种简单而有效的方法来管理大量显示数据。 通过使用这个功能, 您可以快速找到特定的数据, 而无需手动浏览整个表格。