WM Aracı

WM Aracı (https://wmaraci.com/forum/)
-   HTML - CSS - XML (https://wmaraci.com/forum/html-css-xml.html)
-   -   Bir tabloyu belli bir karakterden sonra gizlemek? (https://wmaraci.com/forum/html-css-xml/tabloyu-belli-karakterden-sonra-gizlemek-515971.html)

Lions 09 Temmuz 2018 20:50

Bir tabloyu belli bir karakterden sonra gizlemek?
 
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";
      }
    }
  }
}


soulmy 09 Temmuz 2018 20:55

HTML Kodu:

table tr:nth-of-type(n+5) {
    display: none;
}


Lions 09 Temmuz 2018 20:57

soulmy

Hocam js eklenecek değil mi bu? Olmadı ama?

soulmy 09 Temmuz 2018 20:57

Javascript değil, CSS kodu bu.

Lions 09 Temmuz 2018 21:01

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.

Lions 09 Temmuz 2018 23:34

Yardımcı olabilecek var mıdır?

Weismann21 10 Temmuz 2018 10:33

bence bootstrap datatable kullan link

Lions 10 Temmuz 2018 15:49

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.

Okan_IŞIK 10 Temmuz 2018 18:39

@Lions https://okandiyebiri.com/datatablesi...anmak/#respond

Lions 11 Temmuz 2018 00:04

Okan_IŞIK

Hocam dediklerinizi yaptım ancak değişiklik olmadı.


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

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.