cambiar foco de select option

felipe_ceg · #1 (**permalink**) 02/09/2010, 13:15

estimados,
tengo una consulta acerca del foco de un select option
en esto momento tengo esta tabla:

Código HTML:

Ver original<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
                  <td width="21%" bgcolor="#CCCCCC">&nbsp;&nbsp;Nivel de aceite motor <font size="2" face="Verdana">&nbsp; 
                    </font></td>
<td width="28%" bgcolor="#CCCCCC"><select name="nivacea" style="width:127px">
<option value="Full"> Full</option>
<option value="Crítico"> Crítico</option>
<option value="Medio"> Medio</option>
</select></td>
 
<td width="46%" bgcolor="#CCCCCC"><select name="nivaceb" style="width:127px">
<option value="Full"> Full</option>
<option value="Crítico"> Crítico</option>
</select></td></tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
                  <td width="21%" bgcolor="#CCCCCC">&nbsp;<font size="2" face="Verdana">&nbsp;Nivel de combustible 
                    </font></td>
<td width="28%" bgcolor="#CCCCCC"><select name="nivcoma"style="width:127px">
<option value="Full"> Full</option>
<option value="Crítico"> Crítico</option>
</select></td>
 
<td width="46%" bgcolor="#CCCCCC"><select name="nivcomb"style="width:127px">
 
<option value="Full"> Full</option>
<option value="Crítico"> Crítico</option>
</select></td>                 
</tr></table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
                  <td width="21%" bgcolor="#CCCCCC">&nbsp;<font size="2" face="Verdana">&nbsp;Luces Delanteras </font></td>
                  <td width="28%" bgcolor="#CCCCCC"><select name="lucdela"style="width:127px">
<option value="Buen Estado"> Buen Estado</option>
<option value="Mal Estado"> Mal Estado</option>
</select></td>
<td width="46%" bgcolor="#CCCCCC"><select name="lucdelb" style="width:127px">
<option value="Buen Estado"> Buen Estado</option>
<option value="Mal Estado"> Mal Estado</option>
</select></td>       
</tr>
</table>

bueno con esto, al presionar la tecla TABULAR del teclado se va moviendo hacia el lado...
quiero saber como puedo hacerlo para que al presionar la tecla antes mencionada
el foco baje hasta el final por la primera columna y luego comience con la segunda columna y empiece tambien a bajar...

de antemano muchas gracias....

naciostars · #2 (**permalink**) 02/09/2010, 13:20

haber explicame lo que quieres hacer.....y de antemano te digo que toca que manejes JS..XD

felipe_ceg · #3 (**permalink**) 02/09/2010, 13:29

naciostars,
en la tabla que puse arriba existen 2 columnas con "select option" un <TR> Y dos <TD>
El tema que yo al ejecutar eso y apretar la tecla tabular del teclado el foco se va saltando de manera horizontal, si tuviera tres TD se correria 3 veces hacia el lado,
el tema es que yo quiero que cuando presione tabular el foco se valla moviendo hacia abajo y cuando llegue al ultimo empiece nuevamente de la segunda columna (<TD>)...

naciostars · #4 (**permalink**) 02/09/2010, 14:55

solo debes manejar la propiedad tabindex....

<html>
<head>
</head>
<body>
<form name="forma" method="post" action="">
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="21%" bgcolor="#CCCCCC">  Nivel de aceite motor <font size="2" face="Verdana"> 
</font></td>
<td width="28%" bgcolor="#CCCCCC"><select name="nivacea" style="width:127px" tabindex="1">
<option value="Full"> Full</option>
<option value="Crítico"> Crítico</option>
<option value="Medio"> Medio</option>
</select></td>

<td width="46%" bgcolor="#CCCCCC"><select name="nivaceb" style="width:127px" tabindex="4">
<option value="Full"> Full</option>
<option value="Crítico"> Crítico</option>
</select></td></tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="21%" bgcolor="#CCCCCC"> <font size="2" face="Verdana"> Nivel de combustible
</font></td>
<td width="28%" bgcolor="#CCCCCC"><select name="nivcoma"style="width:127px" tabindex="2">
<option value="Full"> Full</option>
<option value="Crítico"> Crítico</option>
</select></td>

<td width="46%" bgcolor="#CCCCCC"><select name="nivcomb"style="width:127px" tabindex="5">

<option value="Full"> Full</option>
<option value="Crítico"> Crítico</option>
</select></td>
</tr></table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="21%" bgcolor="#CCCCCC"> <font size="2" face="Verdana"> Luces Delanteras </font></td>
<td width="28%" bgcolor="#CCCCCC"><select name="lucdela"style="width:127px" tabindex="3">
<option value="Buen Estado"> Buen Estado</option>
<option value="Mal Estado"> Mal Estado</option>
</select></td>
<td width="46%" bgcolor="#CCCCCC"><select name="lucdelb" style="width:127px" tabindex="6">
<option value="Buen Estado"> Buen Estado</option>
<option value="Mal Estado"> Mal Estado</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>

=)

felipe_ceg · #5 (**permalink**) 02/09/2010, 15:03

guau....
muchas gracias naciostars, me funcionó a la perfeccion

saludos

_cronos2 · #6 (**permalink**) 04/09/2010, 07:54

Por cierto ese código está 'muy sucio', es mejor que uses CSS para aplicar clases y estilos en general, ahorrarás mucho espacio y el código se entenderá mejor.
Saludos (: