Kuinka suodattaa/hakea taulukosta

Opi, miten JavaScriptillä luodaan suodattavat taulukot.

Taulukon suodatus

Kuinka käyttää JavaScriptiä tietojen hakemiseen taulukosta.

Name Country
Alfreds Futterkiste Saksa
Berglunds snabbkop Sweden
Island Trading Yhdistyneet kuningaskunnat
Koniglich Essen Saksa
Naurava Baakkhus Viinitallit Kanada
Magazzini Alimentari Riuniti Italia
Pohjoinen/Sudan Yhdistyneet kuningaskunnat
Pariisin erikoisuudet Ranska

Kokeile itse

Luo suodattava taulukko

Ensimmäinen vaihe - Lisää HTML:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Hae nimiä...">
<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Nimi</th>
    <th style="width:40%;">Maa</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Saksa</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Ruotsi</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Yhdistyneet kuningaskunnat</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Saksa</td>
  </tr>
</table>

Toinen vaihe - Lisää CSS:

Aseta syöttöelementin ja taulukon tyylit:

#myInput {
  background-image: url('/css/searchicon.png'); /* Lisää hakukuvake syöttökenttään */
  background-position: 10px 12px; /* Aseta hakukuvakkeen sijainti */
  background-repeat: no-repeat; /* Älä toista kuvakuvaa */
  width: 100%; /* Täysi leveys */
  font-size: 16px; /* Suurennetaan fonttikoko */
  padding: 12px 20px 12px 40px; /* Lisää sisäinen marginaali */
  border: 1px solid #ddd; /* Lisää harmaa reunaviiva */
  margin-bottom: 12px; /* Lisää tilaa syöttökentän alla */
}
#myTable {
  border-collapse: collapse; /* Yhdistä reunat */
  width: 100%; /* Täysi leveys */
  border: 1px solid #ddd; /* Lisää harmaa reunaviiva */
  font-size: 18px; /* Suurennetaan fonttikoko */
}
#myTable th, #myTable td {
  text-align: left; /* Teksti vasemmassa reunassa */
  padding: 12px; /* Lisää sisäinen marginaali */
}
#myTable tr {
  /* Lisää kaikille taulukkoriveille alareuna */
  border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
  /* Lisää harmaa taustaväri taulukon otsikolle ja hiiren osoitin alla oleville riveille */
  background-color: #f1f1f1;
}

Vaihe kolme - Lisää JavaScript:

<script>
function myFunction() {
  // Määritä muuttujat
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  // Käy läpi kaikki taulukon rivit ja piilota ne, jotka eivät vastaa hakukyselyä
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

Kokeile itse

Vinkki:Jos haluat suorittaa kirjaintasoeroa olevan haun, poista toUpperCase()。

Vinkki:Jos haluat hakea maata (indeksi 1) eikä "nimeä" (indeksi 0), aseta tr[i].getElementsByTagName('td')[0] Vaihda [1]

Liittyvät sivut

Oppitunnit:Miten suodattaa/haku lista