 |
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... 
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  ) 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!
|
Grid oder Flex
Fetch Problem mit Sidebar Toggle (DOM, template)