Function description:
Enter a field in the search box to query the relevant content
Functional implementation:
1. First declare the variable to save the input box and content in the table
2. Circular traversal
Iterate through each row of the table and find matches
3. Judgment
If the content in the input box is similar to the content of a td in the table, a row in the table will be displayed, otherwise it will be hidden
Functional implementation:
<html>
<head>
<style>
#myInput {
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 , #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<input type="text" onkeyup="myFunction()" placeholder="search...">
<table >
<tr class="header">
<th style="width:60%;">Project name</th>
<th style="width:40%;">time</th>
</tr>
<tr>
<td>redPackets</td>
<td>2017.2.6</td>
</tr>
<tr>
<td>traffic</td>
<td>2016.12.25</td>
</tr>
<tr>
<td>creditCard</td>
<td>2017.1.18</td>
</tr>
<tr>
<td>returnMoney</td>
<td>2016.11.25</td>
</tr>
</table>
<script>
function myFunction() {
// Declare variables var input, filter, table, tr, td, i;
input = ("myInput");
filter = ();
table = ("myTable");
tr = ("tr");
// Loop every row of the table to find matches for (i = 0; i < ; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (().indexOf(filter) > -1) {
tr[i]. = "";
} else {
tr[i]. = "none";
}
}
}
}
</script>
</body>
</html>
Extension: Simulated address book search tips
<html>
<head>
<style>
#myInput {
width: 100%;
font-size: 16px; /* Increase font */
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /* Add border to link */
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
}
#myUL li {
background-color: #5587A2;
cursor: default;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<input type="text" onkeyup="myFunction()" placeholder="search...">
<ul >
<li><a href="#" class="header">A</a></li>
<li><a href="#">Angel</a></li>
<li><a href="#">Adobe</a></li>
<li><a href="#">Anne</a></li>
<li><a href="#" class="header">B</a></li>
<li><a href="#">Betty</a></li>
<li><a href="#">Bella</a></li>
<li><a href="#">Brown</a></li>
<li><a href="#" class="header">C</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Chris</a></li>
<li><a href="#">Claire</a></li>
<li><a href="#" class="header">D</a></li>
<li><a href="#">David</a></li>
<li><a href="#">Daniel</a></li>
<li><a href="#">Dora</a></li>
<li><a href="#" class="header">E</a></li>
<li><a href="#">Emily</a></li>
<li><a href="#">Elena</a></li>
<li><a href="#">Eufemia</a></li>
</ul>
<script>
function myFunction() {
// Declare variables var input, filter, ul, li, a, i;
input = ('myInput');
filter = ();
ul = ("myUL");
li = ('li');
// Loop all lists to find matches for (i = 0; i < ; i++) {
a = li[i].getElementsByTagName("a")[0];
if (().indexOf(filter) > -1) {
li[i]. = "";
} else {
li[i]. = "none";
}
}
}
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.