(Turkish) SESLENDİRME SANATÇILARI VOİCEBROS’TA TOPLANDI!

(Turkish) Android Yazılım Uzmanlığı

(Turkish) Çağrı Merkezleri Derneği’nin Yeni Dönem Yönetim Kurulu Başkanı Rengin Ağılönü Oldu

(Turkish) Yüzde yüz Türk girişimi Getir’den Yemeğini Sıcak Sevenlere Çözüm GetirYemek Hizmete Açıldı

Filtreli Arama Tablo Yapımı

  • Web Elements
  • Savaş Dersim Çelik
  • Friday December 16th, 2016
  • 1,743 Görüntülenme
  • HTML, CSS, Javascript
  • Responsive

Merhaba arkadaşlar daha önce bu konuya benzer filtreli arama yapabileceğimiz bir konumuz paylaşmıştık, o konumuzda liste içerisinde arama yapıyorduk. Filtreli Arama Sistemi Yapımı Bu konumuzda bir tablomuz mevcut ve bu tablomuzda anlık olarak istediğimiz bir kelimeye veya karaktere göre arama yaparak sonuçları getirebiliyoruz. Gerekli kodlara ve Demo sayfaya konu altından ulaşabilirsiniz.

HTML Kodlarımız
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Ne Aramak İstemiştiniz..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Adı</th>
    <th style="width:40%;">Şehir</th>
  </tr>
  <tr>
    <td>Savaş Dersim ÇELIK</td>
    <td>Türkiye</td>
  </tr>
  <tr>
    <td>Dilan AKDAĞ</td>
    <td>Türkiye</td>
  </tr>
  <tr>
    <td>Serdar AKKUŞ</td>
    <td>Türkiye</td>
  </tr>
  <tr>
    <td>Nurgül ÖTÜN</td>
    <td>Türkiye</td>
  </tr>
</table>
CSS Kodlarımız
#myInput {
    background-image: url('/css/searchicon.png'); /* Giriş için bir arama simgesi ekle */
    background-position: 10px 12px; /* Arama simgesini konumlandır */
    background-repeat: no-repeat; /* Simge görüntüsünü tekrar etmeyin */
    width: 100%; /* Tam genişlik */
    font-size: 16px; /* Yazıtipi boyutunu arttır */
    padding: 12px 20px 12px 40px; /* Bir miktar dolgu ekle*/
    border: 1px solid #ddd; /* Gri bir kenarlık ekle */
    margin-bottom: 12px; /* Girişin altına biraz boşluk ekle */
}

#myTable {
    border-collapse: collapse; /* Kenarları daralt */
    width: 100%; /* Tam genişlik */
    border: 1px solid #ddd; /* Gri bir kenarlık ekle */
    font-size: 18px; /* Yazıtipi boyutunu arttır */
}

#myTable th, #myTable td {
    text-align: left; /* Metni sola hizalayın */
    padding: 12px; /* Dolgu ekle */
}

#myTable tr {
    /* Tüm tablo satırlarına alt kenarlık ekle */
    border-bottom: 1px solid #ddd; 
}

#myTable tr.header, #myTable tr:hover {
    /* Tablo başlığına ve üzerine gelindiğinde gri arka plan rengi ekleyin */
    background-color: #f1f1f1;
}
Javascript Kodlarımız
<script>
function myFunction() {
  // Değişkenleri bildirin
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Tüm tablo satırlarını dolaştırın ve arama sorgusuyla eşleşmeyenleri gizleyin
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
</script>

filtreli-arama-tablo-yapimi

Yorumlar

Yazıya 1 yorum yapılmış.

ad Tuesday December 25th, 2018

Teşekkürler

Benzer İçerikler