diedVIPs

html knowhow

Tabelle durchsuchen










Tabelle durchsuchen

So sieht´s aus


Nr. Vorname Name Alter
1 Andrea Ross 18
2 Penelope Mills 36
3 Sarah Grant 14
4 Hans Busch 54
5 Karin Lorenz 44


Quellcode
<html>
<head>
<style type="text/css">
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;}
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-left: 50px;}
</style>
</head>

<body >
<p><label>Tabelle durchsuchen: <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>
<tr>
<td>4</td>
<td>Hans</td>
<td>Busch</td>
<td>54</td>
</tr>
<tr>
<td>5</td>
<td>Karin</td>
<td>Lorenz</td>
<td>44</td>
</tr>
</tbody>
</table>
<script>
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>
</body>

</html>










Kontakt    Datenschutz    Impressum