MediaWiki:Common.js: Difference between revisions

Revision as of 21:00, 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) {
            console.warn("No <thead> found, creating one...");
            let headerRow = table.rows[0];
            if (!headerRow) return;
            thead = document.createElement("thead");
            thead.appendChild(headerRow.cloneNode(true));
            table.insertBefore(thead, table.firstChild);
        }

        let filterRow = document.createElement("tr");

        for (let i = 0; i < thead.rows[0].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 colIndex =

@@ Line 5: / Line 5: @@
      function createFilterInputs(table) {
          let thead = table.querySelector("thead");
-         if (!thead) return;
+         if (!thead) {
-        let headerRow = thead.rows[0];
+            console.warn("No <thead> found, creating one...");
+            let headerRow = table.rows[0];
+            if (!headerRow) return;
+            thead = document.createElement("thead");
+            thead.appendChild(headerRow.cloneNode(true));
+            table.insertBefore(thead, table.firstChild);
+        }
          let filterRow = document.createElement("tr");
-         for (let i = 0; i < headerRow.cells.length; i++) {
+         for (let i = 0; i < thead.rows[0].cells.length; i++) {
              let th = document.createElement("th");
              let input = document.createElement("input");
@@ Line 19: / Line 26: @@
              input.addEventListener("keyup", function () {
-                 let col = this.dataset.column;
+                 let colIndex =
-                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();
-});