Skip to content

Commit e8bbbea

Browse files
lgopelgope
committed
Filterable Table using jquery.. 🚀
1 parent 24aa907 commit e8bbbea

1 file changed

Lines changed: 80 additions & 0 deletions

File tree

‎jQuery/jQuery-misc/filer_tables.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Info Table</title>
6+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
7+
<script>
8+
$(document).ready(function () {
9+
$("#myInput").on("keyup", function () {
10+
var value = $(this).val().toLowerCase();
11+
$("#myTable tr").filter(function () {
12+
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
13+
});
14+
});
15+
});
16+
</script>
17+
<style>
18+
table {
19+
font-family: arial, sans-serif;
20+
border-collapse: collapse;
21+
width: 100%;
22+
}
23+
24+
td,
25+
th {
26+
border: 1px solid #dddddd;
27+
text-align: left;
28+
padding: 8px;
29+
}
30+
31+
tr:nth-child(even) {
32+
background-color: #dddddd;
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
39+
<h2>Filterable Table</h2>
40+
<p>Type something in the input field to search the table for first names, last names or emails:</p>
41+
<input id="myInput" type="text" placeholder="Search..">
42+
<br><br>
43+
44+
<table>
45+
<thead>
46+
<tr>
47+
<th>Firstname</th>
48+
<th>Lastname</th>
49+
<th>Email</th>
50+
</tr>
51+
</thead>
52+
<tbody id="myTable">
53+
<tr>
54+
<td>Lakshman</td>
55+
<td>Gope</td>
56+
<td>lakshman@example.com</td>
57+
</tr>
58+
<tr>
59+
<td>Raton</td>
60+
<td>Biswas</td>
61+
<td>raton@mail.com</td>
62+
</tr>
63+
<tr>
64+
<td>JOJO</td>
65+
<td>Dooley</td>
66+
<td>jojo@example.com</td>
67+
</tr>
68+
<tr>
69+
<td>Proddut</td>
70+
<td>Gope</td>
71+
<td>proddut@test.com</td>
72+
</tr>
73+
</tbody>
74+
</table>
75+
76+
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
77+
78+
</body>
79+
80+
</html>

0 commit comments

Comments
 (0)