Türkiye Drone Ligi başlıyor

Artık Youtube’un da okulu var

Youtube Videolarını Arkadaşlarınızla Birlikte Canlı İzleyin!

28. Yılını Kutlayan WWW.’nin Yaratıcısından Ciddi Uyarı!

Filtreli Arama Tablo Yapımı

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

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

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

Filtreli Arama Sistemi Yapımı

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

Popup Resim Galeri Modülü Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
437 Görüntülenme
Bunlar da var!
Marmaris Emlak Konut Hayalleri

Marmaris Emlak Konut Hayalleri

13 Ocak 2016
224 Görüntülenme
IOS Tasarımlı Sliding Menü Tasarımı

IOS Tasarımlı Sliding Menü Tasarımı

2 Ekim 2016
230 Görüntülenme
GTA online’da para kazanabilirsiniz

GTA online’da para kazanabilirsiniz

31 Ocak 2016
191 Görüntülenme
Harekete Başlayınca Durmayan İlginç Alet [Video]

Harekete Başlayınca Durmayan İlginç Alet [Video]

16 Aralık 2015
234 Görüntülenme
Webrazzi Arena 2015in şampiyonu Twentify!

Webrazzi Arena 2015in şampiyonu Twentify!

24 Ekim 2015
207 Görüntülenme