|
|
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ | | /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ |
| /* Styling für die Filter-Eingabefelder */ | | /* Styling für die Filter-Zeile */ |
| .filter-row th { | | .filter-row th { |
| background-color: #f8f9fa; | | background-color: #f8f9fa !important; |
| padding: 5px !important; | | padding: 4px !important; |
| } | | } |
| .filter-row input { | | |
| | .filter-row select { |
| | font-size: 0.85em; |
| border: 1px solid #a2a9b1; | | border: 1px solid #a2a9b1; |
| border-radius: 2px; | | border-radius: 2px; |
| padding: 2px;
| |
| } | | } |
|
| |
| /* Fügt Filter-Eingabefelder zu Tabellen mit der Klasse "filterable" hinzu */
| |
| (function() {
| |
| function setupTableFilters() {
| |
| var tables = document.querySelectorAll('table.filterable');
| |
|
| |
| tables.forEach(function(table) {
| |
| // Verhindern, dass Filter mehrfach hinzugefügt werden
| |
| if (table.classList.contains('filter-ready')) return;
| |
| table.classList.add('filter-ready');
| |
|
| |
| var headerRow = table.querySelector('tr');
| |
| if (!headerRow) return;
| |
|
| |
| var filterRow = document.createElement('tr');
| |
| filterRow.className = 'filter-row';
| |
|
| |
| Array.from(headerRow.cells).forEach(function(th, index) {
| |
| var filterCell = document.createElement('th');
| |
| var input = document.createElement('input');
| |
|
| |
| input.style.width = '90%';
| |
| input.style.fontSize = '0.8em';
| |
| input.placeholder = 'Filter...';
| |
|
| |
| input.addEventListener('keyup', function() {
| |
| var rows = table.querySelectorAll('tr:not(.filter-row):not(:first-child)');
| |
| var filterValues = Array.from(filterRow.querySelectorAll('input')).map(i => i.value.toLowerCase());
| |
|
| |
| rows.forEach(function(row) {
| |
| var cells = row.cells;
| |
| var isVisible = filterValues.every(function(val, idx) {
| |
| return !val || (cells[idx] && cells[idx].textContent.toLowerCase().includes(val));
| |
| });
| |
| row.style.display = isVisible ? '' : 'none';
| |
| });
| |
| });
| |
|
| |
| filterCell.appendChild(input);
| |
| filterRow.appendChild(filterCell);
| |
| });
| |
|
| |
| headerRow.parentNode.insertBefore(filterRow, headerRow.nextSibling);
| |
| });
| |
| }
| |
|
| |
| // Ausführen, wenn die Seite geladen ist
| |
| $(document).ready(setupTableFilters);
| |
| })();
| |
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/* Styling für die Filter-Zeile */
.filter-row th {
background-color: #f8f9fa !important;
padding: 4px !important;
}
.filter-row select {
font-size: 0.85em;
border: 1px solid #a2a9b1;
border-radius: 2px;
}