تست برای تماس با ما

				
					<style>
   #searchInput {
  border: none;
  outline: none;
  width: 30%;
  margin-bottom: 20px;
  -webkit-transition: width 0.15s ease-in-out; 
  transition: width 0.15s ease-in-out;
  font-size: 0.98rem;
  padding: 0.5rem 2rem 0.5rem 0.4rem; 
  border-radius: 4rem; 
  background: #f7f7f7;
  margin-right: 10%;
}

    #searchInput:focus {
    border-bottom: 2px solid #4575b6;
     width: 70%; 
}

  
.app {
  width: 100%;
  height: 100vh;
  margin: 20px 0;
}


.tablecontact {
  border-collapse: collapse;
  width: 80%;
  box-shadow: 0 5px 7px gray;
 margin-left: auto;
  margin-right: auto;
  
}


.theadcontact {
  box-shadow: 0px 0px 10px gray;
  background: #002d6a;
  
}



.thcontact {
  padding: 1rem 3rem;
  text-transform: uppercase;
 //letter-spacing: 1px;
  text-align: center !important;
  color: #fff;
  font-size: 17px;
}


.tdcontact {
  padding: 0.5rem 3rem;
  font-size: 1rem;
  text-align: center !important;
  color: #161616;
  font-size: 15px;
}


.trcontact:nth-child(even) {
  background-color: #dee8f5;
 
}
.colsize0{
    width:200px;}

.colsize1{
    width: 100px;
}
.colsize2{
    width: 50px;
}

</style>
<div class="app">
    <input type="text" id="searchInput" placeholder="جستجو" />
    <table class="tablecontact">
			<thead class="theadcontact">
			  <tr>
			   
				<th class="thcontact colsize0">سمت</th>
				<th class="thcontact colsize1">نام و خانوادگی</th>
				<th class="thcontact colsize2">داخلی</th>
			  </tr>
			</thead>
        <tbody id="names">
          <tr class="">
             <td class="tdcontact colsize0"> الرترکی</td>
            <td class="tdcontact colsize1">تنیبتن یی  سیبتسیکی</td>
            <td class="tdcontact colsize2">مریم کلهری</td>
           
          </tr>
         <tr class="">
            <td class="tdcontact colsize0"> الرترکی</td>
            <td class="tdcontact colsize1"> مدیر فناوری</td>
            <td class="tdcontact colsize2">453</td>
            
          </tr>
           <tr class="">
            <td class="tdcontact colsize0"> الرترکی</td>
            <td class="tdcontact colsize1">پشتیبانی</td>
            <td class="tdcontact colsize2">452</td>
           
          </tr>
        
        
        
          </tbody>
    </table>
</div>
<script>
function filtercontact() {
  
  let input = document.getElementById("searchInput").value.toUpperCase();
  let contactdata = document.getElementById("names");
  let rowdata = contactdata.getElementsByTagName("tr");

  // Iteramos el arreglo de filas
  for(let i = 0; i < rowdata.length; i++){
    // column phone
    let columnphone = rowdata[i].getElementsByTagName("td")[0];
    let phone = columnphone.textContent;
    // column name
    let columnname = rowdata[i].getElementsByTagName("td")[1];
    let name = columnname.textContent;
     // column rank
     let columnrank = rowdata[i].getElementsByTagName("td")[2];
    let rank = columnrank.textContent;
    
    
    rowdata[i].style.display =( (phone.toUpperCase().indexOf(input) > -1 )|| 
    (name.toUpperCase().indexOf(input) > -1) || (rank.toUpperCase().indexOf(input) > -1))? "" : "none";
  }
}


document.getElementById("searchInput").addEventListener("keyup", filtercontact);
</script>