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.

Nr. Vorname Name Alter
1 Andrea Ross 18
2 Penelope Mills 36
3 Sarah Grant 14
4 Vanessa Roberts 27
5 Oliver Alsop 12
6 Jennifer Forsyth 7
7 Michelle King 21
8 Steven Kelly 55
9 Julian Ferguson 15
10 Chloe Ince 23
11 Sarah Myer 22

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


<style>

table#foobar-table thead {
 
positionsticky;
}

table#foobar-table thead {
 
inset-block-start0;
}

table#foobar-table,
table#foobar-table > thead > tr > th,
table#foobar-table > tbody > tr > td {
 
borderSolid 1px #888888;
 
padding5px;
}

table#foobar-table > thead > tr {
 
background-color#FFAE5E;
}

table#foobar-table > tbody > tr:nth-child(even) {
 
background-color#FFFFFF;
}

table#foobar-table > tbody > tr:nth-child(odd) {
 
background-color#FFD2A6;
}

#foobar-table {
 
margin-left50px;
}
</
style>

<
p>
 <
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>Andrea</td>
  <
td>Ross</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', function(event) {
        
rows.forEach(function(tr) {
            
tr.hidden = !tr.textContent.includes(input.value);
        });
    });
})
</
script>
Soll die Groß.- und Kleinschreibung nicht beachtet werden, dann fügt man im Script: toLowerCase() hinzu.
tr.hidden = !tr.textContent.toLowerCase().includes(input.value.toLowerCase());

Bausteine  Alle Anzeigen

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

<div> Allgemeines Block-Element

CSS - DiscoLights - Box-Shadow Animation

PHP - CSV-Datei auslesen

JavaScript - Geburtstag anzeigen

MySQL - Mindestwert einer Spalte ermitteln