JavaScript - HTML-Tabelle filtern

Diese Tabelle kann nach Wörtern oder Zahlen gefiltert werden. Dabei sollte die Groß.- und Kleinschreibung der Wörter beachtet werden.

Filter:

Siehe auch: HTML-Tabelle sortieren, HTML-Tabelle Spaltenbreite anpassen, HTML-Tabelle als CSV-Datei exportieren, Tabellenkalender und CSV-Datei einlesen und dynamisch als Tabelle ausgeben

<style>

table#foobar-table thead {

 position: sticky;

}



table#foobar-table thead {

 inset-block-start: 0;

}



table#foobar-table,

table#foobar-table > thead > tr > th,

table#foobar-table > tbody > tr > td {

 border: Solid 1px #888888;

 padding: 5px;

 color: #000000;

}



table#foobar-table > thead > tr {

 background-color: rgba(255,174,94,0.8);

}



table#foobar-table > tbody > tr:nth-child(even) {

 background-color: #FFFFFF;

}



table#foobar-table > tbody > tr:nth-child(odd) {

 background-color: #FFD2A6;

}



#foobar-table,

p#eingabe {

 margin-left: 50px;

}

</style>



<p id="eingabe">

 <label>Filter: <input type="search" class="filter-table" data-for="#foobar-table" autofocus="autofocus"></label>

</p>



<table id="foobar-table">

<thead>



 <tr>

  <th>Nr.</th>

  <th>Vorname</th>

  <th>Name</th>

  <th>Alter</th>

 </tr>



</thead>

<tbody>



 <tr>

  <td>1</td>

  <td>Allison</td>

  <td>DuBouis</td>

  <td>18</td>

 </tr>



 <tr>

  <td>2</td>

  <td>Penelope</td>

  <td>Mills</td>

  <td>36</td>

 </tr>



 <tr>

  <td>3</td>

  <td>Sarah</td>

  <td>Grant</td>

  <td>14</td>

 </tr>



</tbody>

</table>



<script>

// HTML-Tabelle filtern



document.querySelectorAll(".filter-table").forEach(function (input) {

  var table = document.querySelector(input.dataset.for);

  var rows = table.querySelectorAll("tbody tr");

  input.addEventListener("input", () => {

    rows.forEach(function (tr) {

      if (input.value.length > 0) {

        if (input.value[0] == input.value[0].toUpperCase()) {

          tr.hidden = !tr.textContent.includes(input.value);

        } else {

          tr.hidden = !tr.textContent.toLowerCase().includes(input.value.toLowerCase());

        }

      } else {

        tr.hidden = !tr.textContent.includes(input.value);

      }

    });

  });

});

</script>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<li> Listenelement

CSS - Listenelemente einfärben

PHP - Differenz von einem festen Datum und heute

JavaScript - CSS über Javascript einbinden

MySQL - Datensatz mit den meisten Zeichen ermitteln