MediaWiki:Common.js: Difference between revisions

Revision as of 20:57, 11 March 2025

/* Any JavaScript here will be loaded for all users on every page load. */

#Filterable tables
document.addEventListener("DOMContentLoaded", function () {
    function createFilterInputs(table) {
        let thead = table.querySelector("thead");
        if (!thead) return;
        let headerRow = thead.rows[0];
        let filterRow = document.createElement("tr");

        for (let i = 0; i < headerRow.cells.length; i++) {
            let th = document.createElement("th");
            let input = document.createElement("input");

            input.setAttribute("type", "text");
            input.setAttribute("placeholder", "Filter...");
            input.style.width = "90%";
            input.dataset.column = i;

            input.addEventListener("keyup", function () {
                let col = this.dataset.column;
                let filter = this.value.toLowerCase();
                let tbody = table.querySelector("tbody");
                let rows = tbody.getElementsByTagName("tr");

                for (let row of rows) {
                    let cell = row.getElementsByTagName("td")[col];
                    if (cell) {
                        let text = cell.textContent || cell.innerText;
                        row.style.display = text.toLowerCase().includes(filter) ? "" : "none";
                    }
                }
            });

            th.appendChild(input);
            filterRow.appendChild(th);
        }
        thead.appendChild(filterRow);
    }

    function makeTablesFilterable() {
        document.querySelectorAll(".filterable-table").forEach(table => {
            createFilterInputs(table);
        });
    }

    makeTablesFilterable();
});