Javascript-forum
HTML Tabelle filtern + Navigation mit Pfeiltasten - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: HTML Tabelle filtern + Navigation mit Pfeiltasten (/showthread.php?tid=2817)

HTML Tabelle filtern + Navigation mit Pfeiltasten - anfaenger - 23.03.2024

Hallo zusammen,

ich würde mir gerne eine "Link-Liste" in HTML erstellen. In dieser möchte ich alle für mich wichtigen Links eintragen. 
Wenn ich die HTML Seite aufrufe, möchte ich ein Textfeld haben, in dem ich die Tabelle nach dem Suchtext filtern kann.

Soweit habe ich das - als blutiger Anfänger - auch schon zusammen-ge-googelt...  Shy

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Linkliste</title>
<style>
    <!-- color every other table cell background-->
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 10px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}

th {text-align:center}

tr:nth-child(even) {background-color: #adadad;}
tr:nth-child(odd) {background-color: #dad8d8;}
</style>


</head>
<body>

    <script>
        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";
                }
            }
        }
        </script>


    <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 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 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 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>

</body>
</html>

Der nächste Schritt wäre, dass ich - nachdem ich gefiltert habe - mit den Pfeiltasten den richtigen Eintrag auswählen kann, und den Link dann mit ENTER aufrufen kann.

Das will aber nicht so recht funktionieren. Da ich nicht wirklich programmieren kann, sondern eher "Fundstücke" irgendwie zuammen würfele, sieht der aktuelle Code ("verschönert" durch den Bing CoPilot) im Moment so aus:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Link Liste</title>
<style>
    <!-- color every other table cell background-->
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 10px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}

th {text-align:center}

tr:nth-child(even) {background-color: #adadad;}
tr:nth-child(odd) {background-color: #dad8d8;}
</style>


</head>
<body>

    <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>

    <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>

</body>
</html>

Als Fortschritt sehe ich schon einmal an, dass ich jetzt aus dem Input-Field mit TABULAR in die Liste springen kann, und mit weiterem TABULAR durch die angezeigten Zeilen.
Aber optimal wäre es für mich (der mit DOS aufgewachsen ist  Angel) wenn das mit den Pfeiltasten möglich wäre und ich mit ENTER den Link aufrufen könnte.

Ich vermute, dass ich irgendwie aus der `searchTable()` Funktion wieder raus muss, wenn KEY_DOWN erkannt wurde.

Leider komme ich damit nicht weiter und bin am Verzweifeln.

Vielleicht hat einer der Profis einen Tip für mich? 

Vielen Dank im Voraus,

liebe Grüße!

RE: HTML Tabelle filtern + Navigation mit Pfeiltasten - Sempervivum - 24.03.2024

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>