|
|
| 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 */
| |
| .filter-row th {
| |
| background-color: #f8f9fa;
| |
| padding: 5px !important;
| |
| }
| |
| .filter-row input {
| |
| border: 1px solid #a2a9b1;
| |
| 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);
| |
| });
| |
| }
| |
|
| |
| $(document).ready(setupTableFilters);
| |
| })();
| |
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */