Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
HTML Tabelle filtern + Navigation mit Pfeiltasten
#2
Hallo und willkommen im Forum!

Zunächst mal ist das HTML deiner Tabelle fehlerhaft: Ein Tag <tr> wird mit </tr> geschlossen, nicht <tr/>.

Außerdem ist dies veraltet:
Code:
    <center>
        <h1>LINK LISTE</h1>
        <p><i>lorem ipsum</i></p>
    </center>
Zentriere das mit CSS.

Dann musst Du das Javascript ans Ende des Body stellen, vor das schließende </body> weil andern Falls die Elemente, für die Du die Eventlistener registrierst, noch nicht existieren.

Kern der Sache ist jedoch, dass Du dich mit den geschweiften Klammern vertan hast:
Code:
        function selectRow(row) {
            if (selectedRow) {
                selectedRow.style.backgroundColor = "";
            }
            selectedRow = row;
            selectedRow.style.backgroundColor = "yellow";
        } // Hier ist die Funktion schon zu Ende und muss
          // mit einer Klammer abgeschlossen werde.
          // Die schließende Klammer am Schluss muss
          // statt dessen entfallen.
Arbeite ich das alles ein, funktioniert das Weiterschalten mit den Pfeiltasten. Wahrscheinlich sollte der Tabellenkopf dabei jedoch ausgeschlossen sein. Das kannst Du sicher selbst ergänzen, wenn nicht, melde dich wieder.
Code:
<body>


    <center>
        <h1>LINK LISTE</h1>
        <p><i>lorem ipsum</i></p>
    </center>

    <p><br></p>
    <p><strong> Filter:</strong> <input id='FilterText' onkeyup='searchTable()' type='text' autofocus> <button
            onclick=location.reload()>Clear input field</button> </p>
    <p> </p>
    <p><br></p>
    <table id="URLTable">

        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>COMMENTS / NOTES</th>
        </tr>

        <tbody>
            <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
                <td>Germany</td>
                <td>Earth</td>
                <td>search01.google.com</td>
                <td>physical x86 Server</td>
                <td>Testing</td>
            </tr>
            <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
                <td>Germany</td>
                <td>Earth</td>
                <td>search02.google.com</td>
                <td>physical x86 Server</td>
                <td>Testing</td>
            </tr>
            <tr tabindex="0" style=" cursor: pointer;" onclick="window.open('https://www.google.de')">
                <td>Germany</td>
                <td>Earth</td>
                <td>search03.google.com</td>
                <td>Virtual Machine</td>
                <td>Testing</td>
            </tr>
        </tbody>
    </table>
    <script>
        var selectedRow = null;

        function searchTable() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("FilterText");
            filter = input.value.toUpperCase();
            table = document.getElementById("URLTable");
            tr = table.getElementsByTagName("tr");
            for (i = 1; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

        function selectRow(row) {
            if (selectedRow) {
                selectedRow.style.backgroundColor = "";
            }
            selectedRow = row;
            selectedRow.style.backgroundColor = "yellow";
        }

        document.getElementById("FilterText").addEventListener("keydown", function (event) {
            if (["ArrowDown", "ArrowUp", "Enter"].includes(event.key)) {
                navigateTable(event);
            }
        });
        function attachKeydownToRows() {
            var table = document.getElementById("URLTable");
            var cells = Array.from(table.getElementsByTagName("td"));
            cells.forEach(cell => {
                cell.addEventListener("keydown", function (event) {
                    if (["ArrowDown", "ArrowUp", "Enter"].includes(event.key)) {
                        navigateTable(event);
                    }
                });
            });
        }

        function navigateTable(event) {
            var table = document.getElementById("URLTable");
            var rows = Array.from(table.getElementsByTagName("tr")).filter(row => row.style.display !== "none");
            var currentIndex = rows.indexOf(selectedRow);
            if (event.key === "ArrowDown") {
                if (currentIndex < rows.length - 1) {
                    selectRow(rows[currentIndex + 1]);
                }
            } else if (event.key === "ArrowUp") {
                if (currentIndex > 0) {
                    selectRow(rows[currentIndex - 1]);
                }
            } else if (event.key === "Enter" && selectedRow) {
                selectedRow.click();
            }
        }
    </script>
</body>
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Zitieren


Nachrichten in diesem Thema
RE: HTML Tabelle filtern + Navigation mit Pfeiltasten - von Sempervivum - 24.03.2024, 17:31

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste