<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Filter using JQuery</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Filter Table Data</h1>
<p>Type some text to search:</p>
<input id="myInput" type="text" placeholder="Search..">
<br />
<ul id="myList">
<li>Justice League</li>
<li>Avengers</li>
<li>Batman vs Superman</li>
<li>X-Men</li>
</ul>
<br />
<div id="myDIV">
<p>Justice League is a DC movie</p>
<div>Marvel comics made Avengers series</div>
<br />
<Button>Jean Grey : X-Men</button>
<br />
<p>Batman vs Superman is one of my favourite movies.</p>
<br />
</div>
<table>
<thead>
<tr>
<th>Movie</th>
<th>Comics</th>
<th>Lead Characters</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Justice League</td>
<td>DC</td>
<td>Batman, Superman, Wonderwoman, Flash</td>
</tr>
<tr>
<td>Avengers</td>
<td>Marvel-Disney</td>
<td>Captain America, Iron Man, Dr. Strange, Spider man</td>
</tr>
<tr>
<td>Batman vs Superman</td>
<td>DC</td>
<td>Batman, Superman, Wonderwoman</td>
</tr>
<tr>
<td>X-Men</td>
<td>Marvel-Fox</td>
<td>Charles Xavier, Wolverine, Jean Grey, Beast, Mystique, Magneto</td>
</tr>
</tbody>
</table>
</body>
</html>
$(document).ready(function(){
$("#myInput").on("keyup",function(){
var value1=$(this).val().toLowerCase();
$("#myTable tr").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value1) > -1)
})
$("#myList li").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value1) > -1)
})
$("#myDIV *").filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value1) > -1)
})
});
});
/* Put your css in here */
body {
font-family: Arial;
color: #fff;
padding: 50px;
width: 300px;
margin: 0 auto;
background-color: #374954;
margin-left: 20px;
}
table, div, input ,p ,ul {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid white;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #E0E0E0;
color:black;
}