Featured Posts

[Blogger][feat1]

Recent Posts

Seo Services

Create Colorful responsive Filter/Search Table

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 Create Colorful responsive Filter/Search Table Reviewed by Rajtek.in on April 11, 2020 Rating: 5

WBSEDCL Simplified Forms New Connection Application 2019

October 05, 2019

Click Here To Download Application From


WBSEDCL Simplified Forms New Connection Application 2019 WBSEDCL Simplified Forms New Connection Application  2019 Reviewed by Rajtek.in on October 05, 2019 Rating: 5
ads 728x90 B
Powered by Blogger.