MediaWiki:Common.css

/* 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);
        });
    }

    // Ausführen, wenn die Seite geladen ist
    $(document).ready(setupTableFilters);
})();