How to Create a Filter/Search Table in HTML using Jquery with all columns and rows .
As we have seen in the last article we can search table data with particular columns but in this article, we learn how to search/filter table data using jquery in HTML. It’s very important to learn because this code is full base on the client side, meaning no server hit.
HTML
CODE:
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function ()
{
$("#myInput").on("keyup", function ()
{
var
value = $(this).val().toLowerCase();
$("#myTable
tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value)
> -1)
});
});
});
</script>
<style>
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
table {
font-family: 'Times
New Roman', Times, serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ff0000;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #ffd800;
}
</style>
</head>
<body>
<h2>Cricket
Team List</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search
for names , country" title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:
60%;">Name</th>
<th style="width:
40%;">Country</th>
</tr>
<tr>
<td>Rahul
Dravid</td>
<td>India</td>
</tr>
<tr>
<td>Stephen
Fleming</td>
<td>New
Zealand</td>
</tr>
<tr>
<td>Arvind
kumar</td>
<td>India</td>
</tr>
<tr>
<td>Chris
Cairns</td>
<td>New
Zealand</td>
</tr>
<tr>
<td>Adam
Gilchrist</td>
<td>Australia</td>
</tr>
<tr>
<td>Shane
Warne</td>
<td>Australia</td>
</tr>
<tr>
<td>Virender
Sehwag</td>
<td>India</td>
</tr>
<tr>
<td>Makhaya
Ntini</td>
<td>South
Africa</td>
</tr>
<tr>
<td>Brian
Lara</td>
<td>West
Indies</td>
</tr>
<tr>
<td>Jacques
Kallis</td>
<td>South
Africa</td>
</tr>
</table>
</body>
</html>
DEMO:-
Cricket Team List
| Name | Country |
|---|---|
| Rahul Dravid | India |
| Stephen Fleming | New Zealand |
| Arvind kumar | India |
| Chris Cairns | New Zealand |
| Adam Gilchrist | Australia |
| Shane Warne | Australia |
| Virender Sehwag | India |
| Makhaya Ntini | South Africa |
| Brian Lara | West Indies |
| Jacques Kallis | South Africa |
Reviewed by NEERAJ SRIVASTAVA
on
12:42:00 PM
Rating:
No comments: