Create Colorful responsive Filter/Search Table
Rajtek.in
April 11, 2020
Colorful responsive filter table are one of the most common elements which are used in almost all the websites. but it is also one of the most commonly overlooked element while developing a website. until a necessity comes we won’t remember that we need to add a table. we on this list have collected some of the best table templates which you can customize easily and can use it in your existing website or ongoing projects. copy the code and enjoy it….
<!DOCTYPE html>
<html>
<head>
<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 red;
margin-bottom: 12px;
}
#rajtek {
border-collapse: collapse;
width: 100%;
border: 2px solid #800000;
font-size: 18px;
}
#rajtek th, #rajtek td {
text-align: left;
padding: 8px;
}
#rajtek tr {
border-bottom: 1px solid #87CEEB;
}
#rajtek tr.header, #rajtek tr:hover {
background-color: #87CEEB;
}
</style>
</head>
<body>
<center>
<h2>Rajtek Employee Name</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..." title="Type in a name">
<table id="rajtek">
<tr class="header">
<th style="width:50%;">Name</th>
<th style="width:25%;">Designation</th>
<th style="width:25%;">Communication</th>
</tr>
<tr>
<td>Rajkumar Bera</td>
<td>CEO</td>
<td>033254879513</td>
</tr>
<tr>
<td>Niyati Bera</td>
<td>GM</td>
<td>033254879514</td>
</tr>
<tr>
<td>Anita Bera</td>
<td>AGM</td>
<td>033254879515</td>
</tr>
<tr>
<td>Rimpa Bera</td>
<td>Employee</td>
<td>033254879516</td>
</tr>
<tr>
<td>Riya Bera</td>
<td>Employee</td>
<td>033254879517</td>
</tr>
<tr>
<td>Rohit Kumar Bera</td>
<td>HRA</td>
<td>033254879518</td>
</tr>
<tr>
<td>Rajat Kumar Bera</td>
<td>AHRA</td>
<td>033254879519</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("rajtek");
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>
Demo
Rajtek Employee Name
| Name | Designation | Contact |
|---|---|---|
| Rajkumar Bera | CEO | 033254879513 |
| Niyati Bera | GM | 033254879514 |
| Anita Bera | AGM | 033254879515 |
| Rimpa Bera | Employee | 033254879516 |
| Riya Bera | Employee | 033254879517 |
| Rohit Kumar Bera | HRA | 033254879518 |
| Rajat Kumar Bera | AHRA | 033254879519 |
Create Colorful responsive Filter/Search Table
Reviewed by Rajtek.in
on
April 11, 2020
Rating:
Reviewed by Rajtek.in
on
April 11, 2020
Rating:
