تست برای تماس با ما
نمونه كد | عنوان ۱ | عنوان ثقايفي۲ |
---|---|---|
نمونه #۱ | ردیف ۱ محتوای ۱ | ۳۴۵ |
نمونه #۲ | ردیف ۲ ، محتوای ۱ ردیف ۲ ، محتوای ۱ ردیف ۲ ، محتوای ۱ | ردیف ۲ محتوا ۲ |
نمونه #۳ | ۹۷۸۹ | ردیف ۳ ، محتوای ۲ |
تست برای تماس با ما
سمت | نام و خانوادگی | داخلی |
---|---|---|
الرترکی | تنیبتن یی سیبتسیکی | مریم کلهری |
الرترکی | مدیر فناوری | ۴۵۳ |
الرترکی | پشتیبانی | ۴۵۲ |
<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>