Issue
I have made a filter table using html css and java but not able to add animation to it. I want that on entering the search element the results should be shown after hitting enter and it should be animated... in my condition the search result are shown directly.... here is my code CSS code
* {
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 script code
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 code
<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>
pls someone help me... thanks in advance
Solution
Sorry for rewriting from scratch, feel free to ask any questions
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>Answered By - Anuja Nimesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.