要在HTML和JavaScript中实现“表格过滤器”未找到消息,可以按照以下步骤进行操作:
姓名
年龄
张三
25
李四
30
王五
28
document.getElementById("filterInput").addEventListener("keyup", function() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("filterInput");
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";
}
}
}
});
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
tr:not([style="display: none;"]) {
display: table-row;
}
通过以上步骤,当用户在输入框中输入内容时,表格将根据输入的内容进行过滤,并隐藏不匹配的行。
上一篇:表格滚动条