Eklenti için Admin Panelinde Menü ve Alt Menüler Oluşturma | Eklenti Kodlama

Eklenti Tanımlama Yazar Adı, Eklenti Adı, Versiyon Bilgisi | Eklenti Kodlama

Periscope İndirme Bağlantısı ve Uygulama Hakkında Detaylı Bilgi

Ucuza Uçmanın Keyfini Sürün

Filtreli Arama Tablo Yapımı

Hazır Site Bileşenleri 16 Aralık 2016
396 Görüntülenme

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

Henüz hiç yorum yapılmamış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
329 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
313 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
314 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
334 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

30 Aralık 2016
300 Görüntülenme
Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

24 Aralık 2016
336 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

18 Aralık 2016
473 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
436 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
459 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
369 Görüntülenme
Bunlar da var!
Acer’dan Oyunculara Özel Monitörler

Acer’dan Oyunculara Özel Monitörler

3 Mayıs 2016
184 Görüntülenme
Tavşanların En Komik Halleri

Tavşanların En Komik Halleri

25 Mayıs 2016
159 Görüntülenme
Typonun Yeni Numarası iPadi Laptopa Dönüştürüyor

Typonun Yeni Numarası iPadi Laptopa Dönüştürüyor

8 Haziran 2015
111 Görüntülenme
Oyuncak Karşısında Deliren Kediler [Video]

Oyuncak Karşısında Deliren Kediler [Video]

18 Aralık 2015
171 Görüntülenme
Brexit ve Ankara Antlaşması Vizesi

Brexit ve Ankara Antlaşması Vizesi

13 Temmuz 2016
231 Görüntülenme