我用html css和java制作了一个过滤表，但无法添加动画。我希望在输入搜索元素时，结果应该在点击回车后显示，并且应该动画化。。。在我的情况下，搜索结果直接显示。。。。这是我的代码CSS代码
* {
box-sizing: border-box;
}
#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 5px solid #ddd;
margin-bottom: 12px;
border-radius:20px;
}
#myTable {
border-collapse: collapse;
table-align: center;
width: 80%;
border: 5px 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;
}
Java脚本代码
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;
filter = filter.replace(/s/g,'')
txtValue = txtValue.replace(/s/g, '')
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
} }
}
}
html代码
<html>
<head>
<link href="css/filter-table.css" rel="stylesheet">
<link href="css/hdr-ftr.css" rel="stylesheet">
</head>
<body class="body-wrapper">
<center>
<center><font size="200"><b>Filter table</b></font> <br><br> <br>
<i class="fa fa-search searchIcon"></i>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Search your product here">
</center>
<table id="myTable" align="center" border="5" width>
<tr class="header">
<th style="width:40%;">Column 1</th>
<th style="width:60%;">Column 2</th>
</tr>
<tr>
<td><center>
<br><b>India</b></a></center></td>
<td><br>
<dl>
<li>Search 1</li>
</dl> <br>
</td>
</tr>
<tr>
<td><center>
<br><b>America</b></a></center></td>
<td><br>
<dl>
<li>Search 2</li>
</dl> <br><br><br>
</td>
</tr>
<tr>
<td><center>
<br><b>Iran</b></a></center></td>
<td><br>
<dl>
<li>Search 3</li>
</dl> <br><br><br>
</td>
</tr>
</table>
<!--filter-table.js-->
<script src="js/filter-table.js"></script>
</body>
</html>
请有人帮我。。。提前感谢
很抱歉从头开始重写，请随时提出任何问题
const input = document.querySelector(`input[name="search"]`);
input.onkeyup = () => {
const search = input.value.toLowerCase();
const list = document.querySelectorAll(`section > article`);
list.forEach((article) => {
const title = article.querySelector(`div:first-child`).innerText.toLowerCase();
if (title.includes(search)) {
article.classList.remove(`hide`);
} else {
article.classList.add(`hide`);
}
});
};main {
display: flex;
flex-direction: column;
align-items: center;
}
main>input {
width: 90%;
padding: 1vh;
margin-bottom: 2vh;
font-size: 3vh;
}
main>div {
display: grid;
place-items: center;
width: 100%;
height: 90%;
}
section {
border: 1px solid #000;
font-size: 2em;
width: 90%;
}
section>article {
display: flex;
border: 1px solid #000;
transition: all .2s;
height: 4vh;
font-size: 3vh;
}
section>article.hide {
height: 0;
border: none;
overflow: hidden;
}
section>article>div {
display: flex;
border: 1px solid #000;
width: 50%;
justify-content: space-evenly;
}<body>
<main>
<input type="text" name="search" placeholder="Search.." />
<div>
<section>
<article>
<div>India</div>
<div>s1</div>
</article>
<article>
<div>America</div>
<div>s2</div>
</article>
<article>
<div>Iran</div>
<div>s3</div>
</article>
</section>
</div>
</main>
</body>