如何创建 - 过滤/搜索表格
了解如何使用 JavaScript 创建过滤表。
过滤表
如何使用 JavaScript 搜索表格中的特定数据。
| 名称 | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
创建过滤表
步骤 1) 添加 HTML:
实例
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search
for names..">
<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>
</table>
步骤 2) 添加 CSS:
样式化输入元素和表格:
实例
#myInput {
background-image: url('/css/searchicon.png');
/* 添加搜索图标输入 */
background-position: 10px 12px;
/* 定位搜索图标 */
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;
}
步骤 3) 添加 JavaScript:
实例
<script>
function myFunction() {
// 声明变量
var input, filter,
table, tr, td, i, txtValue;
input = document.getElementById("myInput");
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) {
txtValue = td.textContent ||
td.innerText;
if (txtValue.toUpperCase().indexOf(filter)
> -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
亲自试一试 »
提示:如果要执行区分大小写的搜索，请删除 toUpperCase()。
提示:将 tr[i].getElementsByTagName('td')[0] 更改为 < strong>[1] 如果您想搜索 "Country"（索引 1）而不是 "Name"（索引 0）。
提示: 另请查看 过滤器列表
