Hello Friends , Today I will tell you how to create filter search function on multiple tables with jquery. so let’s go
First of all, create a file of filter.html and add the code given below to that file and save it in any of your folders, and then run that file on the browser.
In the code given below, in which you have created 2 tables and the user name is defined in it, which is being filtered by the code of jquery.
filter.html
<!DOCTYPE html>
<html>
<head>
<title>How to Create filter/search function on multiple tables Using javascript Or Jquery?</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
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;
}
.listtable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
.listtable th, .listtable td {
text-align: left;
padding: 12px;
}
.listtable tr {
border-bottom: 1px solid #ddd;
}
.listtable tr.header, .listtable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" class="listtable" data-name="listtable">
<tr class="header">
<th style="width:60%;">Name</th>
</tr>
<tr>
<td>Jyoti Chaurasiya</td>
</tr>
<tr>
<td>Sonam Chaurasiya</td>
</tr>
<tr>
<td>Khushbu</td>
</tr>
<tr>
<td>Rahul Bharadwaj</td>
</tr>
</table>
<br><br>
<table id="myTable2" class="listtable" data-name="listtable">
<tr class="header">
<th style="width:60%;">Name</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
</tr>
<tr>
<td>Island Trading</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i,alltables;
alltables = document.querySelectorAll("table[data-name=listtable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function(table){
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
});
}
</script>
</body>
</html>