Giriş Yap / Kayıt Ol


Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   Forum > > HTML - CSS - XML
smmturk

Bir tabloyu belli bir karakterden sonra gizlemek?

  #1  
Okunmamış 09 Temmuz 2018, 20:50
Lions Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 05 Mayıs 2017
Yaş / Cinsiyet: 22 / Erkek
Meslek: Yazar
Ad, Soyad: Me... Ko...
Mesajlar: 303
Beğeniler: 195 / 146
Ticaret: 0, 0%
Merhabalar. Html de bir tablo hazırladım fakat bu tabloya ekleyeceğim belkide yüzlerce satır var. Fakat sadece 5-6 satırını göstermesini gerisini arka planda gizlemesini istiyorum. Yardımcı olursanız sevinirim.

HTML Kod;

HTML Kodu:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>


Css Kod;

Kod:
#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
    border-collapse: collapse; /* Collapse borders */
    width: 100%; /* Full-width */
    border: 1px solid #ddd; /* Add a grey border */
    font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
    text-align: left; /* Left-align text */
    padding: 12px; /* Add padding */
}

#myTable tr {
    /* Add a bottom border to all table rows */
    border-bottom: 1px solid #ddd; 
}

#myTable tr.header, #myTable tr:hover {
    /* Add a grey background color to the table header and on hover */
    background-color: #f1f1f1;
}



JS Code;

Kod:
function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  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";
      }
    } 
  }
}
sanalpara palmara
  #2  
Okunmamış 09 Temmuz 2018, 20:55
soulmy Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 12 Haziran 2012
Cinsiyet: Erkek
Meslek: Öğretmen
Konum: Samsun
Ad, Soyad: Or... Yü...
Mesajlar: 1.738
Beğeniler: 397 / 401
Ticaret: 18, 100%
HTML Kodu:
table tr:nth-of-type(n+5) {
    display: none;
}
Lions bunu beğendi.
Webmaster Araçları Scripti v2: https://goo.gl/f4lXDG
  #3  
Okunmamış 09 Temmuz 2018, 20:57
Lions Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 05 Mayıs 2017
Yaş / Cinsiyet: 22 / Erkek
Meslek: Yazar
Ad, Soyad: Me... Ko...
Mesajlar: 303
Beğeniler: 195 / 146
Ticaret: 0, 0%
soulmy

Hocam js eklenecek değil mi bu? Olmadı ama?
  #4  
Okunmamış 09 Temmuz 2018, 20:57
soulmy Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 12 Haziran 2012
Cinsiyet: Erkek
Meslek: Öğretmen
Konum: Samsun
Ad, Soyad: Or... Yü...
Mesajlar: 1.738
Beğeniler: 397 / 401
Ticaret: 18, 100%
Javascript değil, CSS kodu bu.
Webmaster Araçları Scripti v2: https://goo.gl/f4lXDG
  #5  
Okunmamış 09 Temmuz 2018, 21:01
Lions Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 05 Mayıs 2017
Yaş / Cinsiyet: 22 / Erkek
Meslek: Yazar
Ad, Soyad: Me... Ko...
Mesajlar: 303
Beğeniler: 195 / 146
Ticaret: 0, 0%
soulmy

Hocam teşekkür ederim gizledi fakat bu defa da aramada çıkartmıyor. Yani arayınca listede gizli olanları göstermiyor. Yapmak istediğim şey şu aslında;

Mesela 500 tane satır girdim o tabloya. Sadece 10 tanesini gösterecek ve bir kelime arandığı zaman o kelimeyi içeren tüm satırları "tablo boyutunun dışına çıkmadan" sıralayacak. Kaydırmalı çubukla aşağı doğru inerek bakabileceğiz. Sadece şu gizleme ve gösterme işini yapamadım gerisini css den hallederim.
  #6  
Okunmamış 09 Temmuz 2018, 23:34
Lions Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 05 Mayıs 2017
Yaş / Cinsiyet: 22 / Erkek
Meslek: Yazar
Ad, Soyad: Me... Ko...
Mesajlar: 303
Beğeniler: 195 / 146
Ticaret: 0, 0%
Yardımcı olabilecek var mıdır?
  #7  
Okunmamış 10 Temmuz 2018, 10:33
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 29 Kasım 2017
Yaş / Cinsiyet: 20 / Erkek
Meslek: Web Developer
Ad, Soyad: En... Ba...
Mesajlar: 38
Beğeniler: 9 / 1
Ticaret: 0, 0%
bence bootstrap datatable kullan link
Lions bunu beğendi.
  #8  
Okunmamış 10 Temmuz 2018, 15:49
Lions Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 05 Mayıs 2017
Yaş / Cinsiyet: 22 / Erkek
Meslek: Yazar
Ad, Soyad: Me... Ko...
Mesajlar: 303
Beğeniler: 195 / 146
Ticaret: 0, 0%
Weismann21


Hocam çok teşekkür ederim tam da aradığım tablo biçimini buldum ve sayenizde uyguladım. Ufak bir şey sormak istiyorum Show, Entries, Search gibi bölümlerin Türkçeleştirmesini nereden yapabilirim? Hangi js dosyasında olduğunu bulamadım. Teşekkür ederim.
  #9  
Okunmamış 10 Temmuz 2018, 18:39
Okan_IŞIK Adlı Üyenin Avatarı
Ben webmaster değilim
 
Üyelik Tarihi: 29 Haziran 2011
Yaş / Cinsiyet: 31 / Erkek
Konum: Tekirdağ
Ad, Soyad: Ok... Iş...
Mesajlar: 953
Beğeniler: 436 / 330
Ticaret: 12, 100%
@Lions https://okandiyebiri.com/datatablesi...anmak/#respond
Lions bunu beğendi.
  #10  
Okunmamış 11 Temmuz 2018, 00:04
Lions Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 05 Mayıs 2017
Yaş / Cinsiyet: 22 / Erkek
Meslek: Yazar
Ad, Soyad: Me... Ko...
Mesajlar: 303
Beğeniler: 195 / 146
Ticaret: 0, 0%
Okan_IŞIK

Hocam dediklerinizi yaptım ancak değişiklik olmadı.
Cevap Yaz Favorilerime Ekle


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   Forum > HTML - CSS - XML


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı




Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şu anki Zaman: 21:07.