我正在尝试根据我已经使用表元素完成的用户输入来过滤 div 元素,但现在我需要在 div 元素中执行相同的操作。
用户输入
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Teacher.." title="Type in a name"><br/>
表格数据
<div style="border:1px solid gray">
<table id="myTable" >
<c:forEach var="tr" items="${teachersList}">
<tr><td><a href="teacher_view_adm?tcrId=${tr.id}" >${tr.fname} ${tr.lname}</a><br/>Last Seen</td>
</tr>
</c:forEach>
</table>
</div>
表格脚本
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
if(filter==""){
}
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";
}
}
}
}
</script>
上面的代码适用于表元素,但我如何更改为 div 元素。下面我指定了 div 元素数据的结构。
Div 元素
<div style="border:1px solid gray" id="myDiv">
<c:forEach var="tr" items="${teachersList}">
<div>
<p><a href="teacher_view_adm?tcrId=${tr.id}" >${tr.fname} ${tr.lname}</a><br/>Last Seen</p>
</div>
</c:forEach>
</div>
我需要将上面的表格脚本更改为div元素脚本有人可以帮我做到这一点吗?
最佳答案
如果我理解正确的话,你需要这样的东西。
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);
function myFunction(e) {
var filter = e.target.value.toUpperCase();
var list = document.getElementById("list");
var divs = list.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var a = divs[i].getElementsByTagName("a")[0];
if (a) {
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}
}
<input type="text" id="myInput" placeholder="Search for Teacher.." title="Type in a name"><br/>
<div id="list">
<div>
<p><a href="">test data 1</a><br/>Last Seen</p>
</div>
<div>
<p><a href="">test data 2</a><br/>Last Seen</p>
</div>
<div>
<p><a href="">new test data 3</a><br/>Last Seen</p>
</div>
</div>
关于javascript - 如何根据用户输入过滤div元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42642869/