How to Create a Filter/Search Table in HTML using Jquery
Here we write Jquery code for search text from HTML table and based on that it will filter HTML table row and figure out searching text available in any of the table cells if a search query is available in any of the table cell then it will display that table row on web page. This type of functionality is very useful in our web application, this is because for filter data from html we have not executed any server side code for filter data and all things we have done on web page.
In this article, I will explain how to search data
from HTML table using the JQuery function. We will learn how to create
functions using JQuery and how to add the JQuery library to our webpage.
*In this article, we will filter data with only by name
(one column), if you want to filter withall columns click here *
HTML Code:-
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#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;
}
#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 tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Cricket
Team List</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search
for names." 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>
<script>
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;
if
(txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
Out-Put:
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
6:07:00 PM
Rating:
No comments: