Jquery Search Filter Table Rows Example
In this article, we will see jquery search filter table rows example. here we will see how to search data using the jquery filter. Manytimes we have requirements to filter or find specific data from the HTML table. Here we will use the filter() method returns elements that match certain criteria.
So, let's see how to search data using jquery filter, how to search data using jquery filter, filter table rows using jquery, jquery search filter table rows example, search table rows using jquery, jquery search table rows.
Example: Jquery Search Filter Table Rows Example
Here, we will create table and add search box.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Jquery Search Filter Table Rows Example- Techsolutionstuff</h2>
<input id="myInput" type="text" placeholder="Search Here..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Carry</td>
<td>james</td>
<td>carry@example.com</td>
</tr>
<tr>
<td>Jery</td>
<td>joe</td>
<td>jery@gmail.com</td>
</tr>
<tr>
<td>Demo</td>
<td>roof</td>
<td>demo@test.com</td>
</tr>
<tr>
<td>Jeff</td>
<td>befos</td>
<td>jeff_b@test.com</td>
</tr>
</tbody>
</table>
</body>
<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>
</html>
You might also like:
- Read Also: How To Disable Right Click Using jQuery
- Read Also: Laravel 8 Autocomplete Search from Database
- Read Also: How To Convert HTML To PDF Using JavaScript
- Read Also: Autocomplete Search using Bootstrap Typeahead JS
