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

<datalist> Datenliste

CSS - Die Schriftgröße je nach Fensterbreite automatisch anpassen

PHP - Zufallspasswort erzeugen

JavaScript - Entferne HTML Tags in JavaScript

MySQL - Datensatz aktualisieren

Templates - HP Vorlagen
Templates sind fertige Homepage Vorlagen, die man nur noch mit Inhalt füllen muss. Das ist zwar für Anfänger eine schnelle Lösung, aber möchten Sie das gleiche Design wie auf anderen 97 Webseiten auch? Jede Homepage hat ihren eigenen Touch, eben der Stil, der die Seite einmalig macht.