MultiFlex-2 Web Site Tasarımı

Monkeys Web Site Tasarımı

Lazy Days Web Site Tasarımı

In a Pickle Web Site Tasarımı

Filtreli Arama Tablo Yapımı

Hazır Site Bileşenleri Cuma Aralık 16th, 2016
549 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

Salı Ocak 17th, 2017
1.624 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
636 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.365 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

Salı Ocak 17th, 2017
1.659 Görüntülenme
HTML ve CSS ile Dropdown Buton Yapımı

HTML ve CSS ile Dropdown Buton Yapımı

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

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

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

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

Pazar Aralık 18th, 2016
597 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
567 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
639 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

Cuma Aralık 9th, 2016
506 Görüntülenme
Bunlar da var!
Kırmızıda Geçti Hava Yastığını Şişirtti [Video]

Kırmızıda Geçti Hava Yastığını Şişirtti [Video]

Salı Eylül 22nd, 2015
220 Görüntülenme
Hamileliğin Gerçekleri Karşısında Kayışı Koparan Kadınlar

Hamileliğin Gerçekleri Karşısında Kayışı Koparan Kadınlar

Cuma Haziran 26th, 2015
275 Görüntülenme
Manuscript Web Site Tasarımı

Manuscript Web Site Tasarımı

Pazar Nisan 2nd, 2017
65 Görüntülenme
Hayrettin ile 360 Fashion Week

Hayrettin ile 360 Fashion Week

Cumartesi Nisan 30th, 2016
216 Görüntülenme
2015 Genel Seçim sonuçlarını takip edebileceğiniz portaller

2015 Genel Seçim sonuçlarını takip edebileceğiniz portaller

Cuma Haziran 5th, 2015
215 Görüntülenme
LG G5 Tasarım Detayları Sızdı!

LG G5 Tasarım Detayları Sızdı!

Salı Ocak 19th, 2016
261 Görüntülenme