Tabelle: Per Pfeiltaste von Zeile zu Zeile springen?

**Daphne26** · 07-01-2006, 17:56

Hallo alle zusammen,

kann ich per Javascript in einer Tabelle mit den beiden Pfeiltasten "nach oben" und "nach unten" von Zeile zu Zeile springen (entweder nach oben oder nach unten)? So dass die jeweils aktive Zeile immer einen anderen background-color hat?

Geht sowas?
Bin für jeden Tipp dankbar.

Gruß
Daphne

**inco** · 08-01-2006, 00:00

Hi Daphne,

das mit den Pfeiltasten wird schwierig, du müsstest ein key-event-listener auf jede Zelle setzen etc.
einfacher ist das bereits implementierte "tabindex".
Vielleicht genügen dir ja die Tabulator-Taste für runter
und die Kombination Shift-Tab-Taste für rauf, dann wäre mein Tipp:

PHP-Code:


<table>

<tr><td tabindex=1 onFocus=this.style.backgroundColor='pink' onBlur=this.style.backgroundColor='white'>test1</td></tr>

<tr><td tabindex=2 onFocus=this.style.backgroundColor='pink' onBlur=this.style.backgroundColor='white'>test2</td></tr>

<tr><td tabindex=3 onFocus=this.style.backgroundColor='pink' onBlur=this.style.backgroundColor='white'>test3</td></tr>

<tr><td tabindex=4 onFocus=this.style.backgroundColor='pink' onBlur=this.style.backgroundColor='white'>test4</td></tr>

</table>

gruß inco

**Daphne26** · 09-01-2006, 09:34

Hallo,

vielen Dank für Deine Hilfe. Aber es müsste doch eigentlich auch über die Pfeiltasten gehen. Ich stelle mir das wir folgt for:

Bei Tastatureingabe, werden jeweils die Eingabe-Ascii-Werte per Javascript geprüft. Sofern die Pfeiltaste-unten geklickt wird, löst der entsprechende Ascii-Wert (40) die Aktion aus, das das untere Tabellenfeld z.B. gelb markiert wird. Bei dem Ascii-Wert 38 (Pfeil oben) wird ein Tabellenfeld darüber gelb formatiert usw ....

Soweit die Theorie, nur wie setze ich das ganze in Javascript um? Wie fange ich die Ascii-Werte der Pfeiltasteneingabe ab? Mit "charCodeAt()" funktioniert es glaube ich nicht.

Wer hat mehr Ahnung als ich?

Gruß
Daphne

pit-r · 09-01-2006, 10:08

Moin!

Beispiel:

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Hüühüpf</title>

<script type="text/javascript">

ie=typeof document.all=='object';

var t, letzte, zeilen, zeile=1;

function huepf(e){

if(!e)e=window.event;

key=e.which?e.which:e.keyCode;

if(key==40&&zeile<zeilen)zeile++;

if(key==38&&zeile>1)zeile--;

machHintergrund(zeile);

}

function machHintergrund(welche){

z=t.rows[welche-1];

if(letzte)letzte.style.backgroundColor='#ffffff';

z.style.backgroundColor='#ffff00';

letzte=z;

}

function init(){

t=document.getElementById('tabelle');

zeilen=t.rows.length;

machHintergrund(zeile);

if(ie)document.onkeydown=huepf;

else document.onkeypress=huepf;

}

</script>

</head>

<body onload="init();">

<table border="1" id="tabelle">

<tr><td>Zeile 1</td></tr>

<tr><td>Zeile 2</td></tr>

<tr><td>Zeile 3</td></tr>

<tr><td>Zeile 4</td></tr>

<tr><td>Zeile 5</td></tr>

<tr><td>Zeile 6</td></tr>

</table>

</body>

</html>

Ahoi - Pit

**Daphne26** · 09-01-2006, 10:14

Wow, das ging aber schnell. Vielen Dank, genau so habe ich mir das vorgestellt ;-)
Gruß
Daphne

pit-r · 09-01-2006, 10:21

Gern geschehen.

Ahoi - Pit

**alex.maier** · 11-01-2007, 20:18

hallo,

bin eben auf diesen thread gestossen, weil ich auch genau soetwas suche.

nun noch die frage, gibt es auch die möglichkeit den focus damit auf und ab zu bewegen?

hintergrund ist, das ich mit den pfeiltasten hoch und runter möchte um dann mit enter eine auswahl zu treffen (onclick).

ich hab das script eben mal probiert und es funktioniert super, aber drückt man dann in dieser tabelle die tab taste, dann bewegt sich der focus unabhängig vom markierten hintergrund auf und ab (tab/shift-tab).
auf enter reagiert dann natürlich nur das was unter dem focus liegt, nicht aber das was unter dem farblich markierten hintergrund liegt.
natürlich kann ich ja die tab taste sperren, aber am besten wärs, wenn pfeil auf/ab dem tab/shift-tab entsprechen würde, bzw. wenn man das irgendwie ummünzen könnte, das bei der pfeil-auftaste ein tab "simuliert" wird und bei pfeil nach unten ein shit-tab", dann könnte man schön den focus hin und her bewegen und mit enter auswählen.

gibts da ne möglichkeit?

vielen dank vorab.

alex