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;
 
color#000000;
}

table#foobar-table > thead > tr {
 
background-colorrgba(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-left50px;
}
</
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>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>

<
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.

<select> Auswahlliste (Formularelement)

CSS - Mit ::selection markierten Text hervorheben

PHP - Wort in einem Text markieren

JavaScript - Zweite Auswahlliste aktivieren

MySQL - Doppelte Einträge in der Tabelle finden