Cami Halısı Avrupada Lider Firma Gülseven Halı

Arçelik Güvenilir Servis Hizmetleri

Arçelik Buzdolabı Servisi

WordPress Eklentiye ait Klasör Dizin Adresi Öğrenebileceğiniz Kodlar

Filtreli Arama Tablo Yapımı

Hazır Site Bileşenleri 16 Aralık 2016
340 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
128 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

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

Filtreli Arama Sistemi Yapımı

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

Popup Resim Galeri Modülü Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
309 Görüntülenme
Bunlar da var!
Türkler İlginç İngiliz Çikolatalarını Tadıyor

Türkler İlginç İngiliz Çikolatalarını Tadıyor

12 Nisan 2016
133 Görüntülenme
Ultrason Bizim İşimiz

Ultrason Bizim İşimiz

4 Nisan 2016
125 Görüntülenme
İddaa Bloglarını Takip Et Kazan!

İddaa Bloglarını Takip Et Kazan!

16 Nisan 2016
197 Görüntülenme