Flytta mellan <TR>

CantonaMedlem sedan juni 200161 inlägg

Frågan4 apr. 2002 18:05#1

Låt säga att jag har en table typ:

<table>
<tr onclick="kop?val=socker"> <td> Socker </td></tr>
<tr onclick="kop?val=mjöl"> <td> Mjöl </td></tr>
<tr onclick="kop?val=jäst"> <td> Jäst </td></tr>
</table>

Jag skulle vilja ha focus på den första <tr> vid onload sedan kunna flytta mig mellan övriga <TR> genom att använda piltangenterna.

Den TR som har focus skall visa annan backgrundsfärg så att man ser att den har focus.

script för hantering av tangenttryckningar har jag redan fixat.
Men min fråga är, HUR GÖR JAG FÖR ATT FÅ FOCUS OCH FÖRFLYTTA MIG MELLAN RADERNA???

JojoxxMedlem sedan juni 20004 308 inlägg

4 apr. 2002 18:48#2

Att bara sätta focus på en TR gör ju inte så mycket, så vi får sätta ett id på raderna så vi har något att refferera till. Sedan lägger vi upp dessa id i en array som vi kan hoppa runt i. Till sist använder vi en funktion för att ändra stil på aktuellt objekt. För att hoppa till föregående rad anropar du markprev() och nästa marknext().

var celler = new Array("a","b","c");
var current=-1;
function marknext(){
 	if(current!=-1) changeStyle(celler[current],"backgroundColor","White");
	current=(current==-1||current>celler.length-2)?0:current+1;
	changeStyle(celler[current],"backgroundColor","Blue");
}
function markprev(){
	if(current!=-1) changeStyle(celler[current],"backgroundColor","White");
	current=(current==-1||current<1)?celler.length-1:current-1;
	changeStyle(celler[current],"backgroundColor","Blue");
}

function changeStyle(Id,Property,Value){
	if (document.all){
		eval('document.all[Id].style.'+Property+'="'+Value+'"');
	} else if (document.layers){
		eval('document.layers[Id].'+Property+'="'+Value+'"');
	} else if (document.getElementById){
		eval('document.getElementById(Id).style.'+Property+'="'+Value+'"');
	}
}

Eftersom dina onClick-event inte gör något tar jag mig friheten att plocka bort dem.

<table> 
<tr id="a"> <td> Socker </td></tr> 
<tr id="b"> <td> Mjöl </td></tr> 
<tr id="c"> <td> Jäst </td></tr> 
</table>