MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

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