24.03.2024, 17:31
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:
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:
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.
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>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.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)
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)