elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: ¿Eres nuevo? ¿Tienes dudas acerca del funcionamiento de la comunidad? Lee las Reglas Generales


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Evento onfocus en fila de una tabla		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: Evento onfocus en fila de una tabla  (Leído 13,258 veces)
M3LiNdR1

Desconectado Desconectado

Mensajes: 131



Ver Perfil WWW
Evento onfocus en fila de una tabla
« en: 25 Enero 2013, 12:58 pm »
Hola, muy buenas! :)

Tengo una tabla en HTML, y quiero que cada vez que se haga click en una fila, esta quede resaltada de un color diferente y si se hace click en otra fila, la anterior vuelva a su color inicial y la nueva que resaltada.

Para hacer esto, he pensado usar los eventos onfocus y onblur. Segun W3C puedo usar este evento en el tag <tr>. http://www.w3schools.com/jsref/event_onfocus.asp

Y tengo el siguiente codigo:

Código
  1. <!DOCTYPE html>
  5. function myFunction(x)
  6. {
  7. x.style.background="yellow";
  8. }
  9. function myFunction2(x)
  10. {
  11. x.style.background="white";
  12. }
  14. </head>
  18. 		<tr>
  19. 			<th>Product</th>
  20. 			<th></th>
  21. 			<th>Price</th>
  22. 			<th>Cost</th>
  23. 			<th></th>
  24. 		</tr>
  25. 		<tr onfocus="myFunction(this)" onblur="myFunction2(this)">
  26. 			<td>ProductName01</td>
  27. 			<td>1x</td>
  28. 			<td>35.20€</td>
  29. 			<td>35.20€</td>
  30. 			<td>x</td>
  31. 		</tr>
  32. 		<tr  onfocus="myFunction(this)" onblur="myFunction2(this)">
  33. 			<td>ProductName01</td>
  34. 			<td>1x</td>
  35. 			<td>35.20€</td>
  36. 			<td>35.20€</td>
  37. 			<td>x</td>
  38. 		</tr>
  39. 		<tr  onfocus="myFunction(this)" onblur="myFunction2(this)">
  40. 			<td>ProductName01</td>
  41. 			<td>1x</td>
  42. 			<td>35.20€</td>
  43. 			<td>35.20€</td>
  44. 			<td>x</td>
  45. 		</tr>
  46. 	</tbody>
  48. </body>
  49. </html>

Ahora mi pregunta es, que problema hay? porque no se ejecutan los scripts?

Muchas gracias! :)
En línea
Va baixar davant dels meus...ulls molt suaument...sense alterar la quietud de la nit,amb un somriure ple de confiança com sino se li escapes res...


C/C++ - Prolog - Java - PHP - Python - SQL - ASP.NET - C# - javascript
alister


Desconectado Desconectado

Mensajes: 513


Ver Perfil
Re: Evento onfocus en fila de una tabla
« Respuesta #1 en: 25 Enero 2013, 17:30 pm »
quizas quieras leer esto:
http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child/45530#45530

habla de selectores CSS pero creo que sucede igual con el evento onfocus de un TR: dado que nunca seleccionas el TR en si mismo, sino la TD contienida dentro de el TR, la condicion propuesta nunca se cumple.

te lo tendria que confirmar de todos modos. no lo acabo de ver claro.
« Última modificación: 25 Enero 2013, 17:36 pm por alist3r » En línea
Back 2 business!
alister


Desconectado Desconectado

Mensajes: 513


Ver Perfil
Re: Evento onfocus en fila de una tabla
« Respuesta #2 en: 25 Enero 2013, 17:34 pm »
confirmado.
estas obligado a usar javascript

http://stackoverflow.com/questions/5986554/how-to-change-background-color-of-table-row-tr-when-input-is-focus
(la respuesta 3 ofrece un ejemplo con JQuery muy sencillo)
En línea
Back 2 business!
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Evento onfocus en fila de una tabla
« Respuesta #3 en: 25 Enero 2013, 19:16 pm »
Ni TD ni TR aceptan focus o blur con parámetros del tipo onfocus="". La razón es que por defecto en ellos no puedes hacer nada mas que ver el contenido. Una prueba de ello es este sencillo script:

Código
  1. <table><tr><td onfocus="alert('prueba');">sadada</td></tr></table>

De hecho, no funcionara en ningún elemento que no acepte algún tipo de input o pueda ser seleccionado (un <a> funcionaria).

NO funciona
Código
  1. <div onfocus="alert('aaaa');">clickea me</div>
Si Funciona
Código
  1. <div><a href="" onfocus="alert('aaaa')">clickea me</a></div>

De todos modos tu problema puede ser resuelto de una manera bastante simple.

Código
  1. <script>
  2.     function myFunction(x) {
  3.         // Obtenemos todos los TR de la tabla con id "mi_tabla"
  4.         // despues del tbody.
  5.         var elementos = document.getElementById('mi_tabla').
  6.         getElementsByTagName('tbody')[0].getElementsByTagName('tr');
  7.  
  8.         // Por cada TR empezando por el segundo, ponemos fondo blanco.
  9.         for (var i = 1; i < elementos.length; i++) {
  10.             elementos[i].style.background='white';
  11.         }
  12.         // Al elemento clickeado le ponemos fondo amarillo.
  13.         x.style.background="yellow";
  14.     }
  15. </script>

Código
  2.     <table id="mi_tabla">
  3.         <tbody>
  4.             <tr>
  5.                 <th>Product</th>
  6.                 <th></th>
  7.                 <th>Price</th>
  8.                 <th>Cost</th>
  9.                 <th></th>
  10.             </tr>
  11.             <tr onclick="myFunction(this)">
  12.                 <td>ProductName01</td>
  13.                 <td>1x</td>
  14.                 <td>35.20€</td>
  15.                 <td>35.20€</td>
  16.                 <td>x</td>
  17.             </tr>
  18.             <tr onclick="myFunction(this)">
  19.                 <td>ProductName01</td>
  20.                 <td>1x</td>
  21.                 <td>35.20€</td>
  22.                 <td>35.20€</td>
  23.                 <td>x</td>
  24.             </tr>
  25.             <tr onclick="myFunction(this)">
  26.                 <td>ProductName01</td>
  27.                 <td>1x</td>
  28.                 <td>35.20€</td>
  29.                 <td>35.20€</td>
  30.                 <td>x</td>
  31.             </tr>
  32.         </tbody>
  33.     </table>
  34. </body>

Así al hacer click sobre un TR los demás (menos el primero que es el que contiene los th) recibirán un fondo blanco y al que le has hecho click un fondo amarillo.

Espero que te sirva.

PD: Obviamente, en jQuery la sintaxis seria mucho mas corta pero no es buena idea incluir jQuery solo para hacer esto..

Saludos
En línea
alister


Desconectado Desconectado

Mensajes: 513


Ver Perfil
Re: Evento onfocus en fila de una tabla
« Respuesta #4 en: 25 Enero 2013, 21:19 pm »
menudo "hack" mas chulo te has marcao!

tomo nota, has enseñado algo interesante.

aunque no suelo tocar webs ligeras donde no estuviera razonablemente justificado el uso de JQuery, para el caso de una carta de ventas pequeñita o microsite, esto está interesante.

PD: si usamos el tabulador para navegar entre los input... nos saltamos el evento onclick! :(
En línea
Back 2 business!
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Evento onfocus en fila de una tabla
« Respuesta #5 en: 25 Enero 2013, 21:33 pm »
Citar
PD: si usamos el tabulador para navegar entre los input... nos saltamos el evento onclick! :(

Claro porque realmente no hacemos click sobre ellos xD
Pero para los <input> es perfectamente valido utilizar onfocus y onblur.

Saludos
En línea
M3LiNdR1

Desconectado Desconectado

Mensajes: 131



Ver Perfil WWW
Re: Evento onfocus en fila de una tabla
« Respuesta #6 en: 26 Enero 2013, 02:57 am »
Buenas  :D

Primero quiero daros las gracias a los dos por dedicar vuestro tiempo en responder mis dudas.

Respecto a los ejemplos de drvy | BSM, me han ayudado mucho. Ahora ya me queda claro :). Pero al final lo he resuelto de esta forma, voy a explicaros porque.

Esta tabla se genera a partir de un GridView de ASP.NET, por lo tanto puede tener N filas. Las filas alternan el estilo, las filas pares no llevan estilo y las impares llevan el estilo impar. Para saber si una fila es par o impar, cuando se genera la tabla html con sus filas, hago que cada fila guarde su posición en el atributo id. Quedaria
de la siguiente forma:

Codigo de estilos CSS:

Código
  1.  
  2. .trselected {
  3.     background: #ffa24f;
  4.     color: black;
  5. }
  6. .impar {
  7.     background: #C0C0C0;
  8. }
  9.  
  10. .thead { 
  11. 	background: #ff5b18;
  12. }

Codigo javascript:

Código
  1. function myFunction(x) {
  2.  
  3. /*Comprueba si existe un elemento con el class="trselected". El
  4. metodo getElementsByClassName devuelve un array con todos
  5. los elementos que llevan el estilo que le pases como parametro.*/
  6.  
  7. if (document.getElementsByClassName("trselected").length > 0) {
  8. 	var element = document.getElementsByClassName("trselected");
  9.  
  10.         /*Como solo hay uno, me quedo con el primer elemento del 
  11.          array.*/
  12. 	if (element[0].id%2 != 0) element[0].className = "impar";
  13. 	else element[0].className = "";
  14. }
  15. x.className="trselected";
  16. }

Por último el codigo HTML de la tabla:

Código
  3. 		<tr class="thead">
  4. 			<th>Product</th>
  5. 			<th></th>
  6. 			<th>Price</th>
  7. 			<th>Cost</th>
  8. 			<th></th>
  9. 		</tr>
  10. 	</thead>
  12. 		<tr id = "1" class="impar" onclick="myFunction(this)">
  13. 			<td>ProductName01</td>
  14. 			<td>1x</td>
  15. 			<td>35.20€</td>
  16. 			<td>35.20€</td>
  17. 			<td>x</td>
  18. 		</tr>
  19. 		<tr id = "2" onclick="myFunction(this)">
  20. 			<td>ProductName01</td>
  21. 			<td>1x</td>
  22. 			<td>35.20€</td>
  23. 			<td>35.20€</td>
  24. 			<td>x</td>
  25. 		</tr>
  26. 		<tr id = "3" class="impar" onclick="myFunction(this)">
  27. 			<td>ProductName01</td>
  28. 			<td>1x</td>
  29. 			<td>35.20€</td>
  30. 			<td>35.20€</td>
  31. 			<td>x</td>
  32. 		</tr>
  33. 		<tr id = "4" onclick="myFunction(this)">
  34. 			<td>ProductName01</td>
  35. 			<td>1x</td>
  36. 			<td>35.20€</td>
  37. 			<td>35.20€</td>
  38. 			<td>x</td>
  39. 		</tr>
  40. 	</tbody>
  42.  

Que os parece? Parece una solución un poco bruta, pero no he pensado nada mejor. No me acaba de gustar que las ids sean solo números. Habeis dicho que se puede hacer también con jQuery, cual seria el metodo a utilizar?

Muchas gracias  ;-)
« Última modificación: 26 Enero 2013, 03:04 am por M3LiNdR1 » En línea
Va baixar davant dels meus...ulls molt suaument...sense alterar la quietud de la nit,amb un somriure ple de confiança com sino se li escapes res...


C/C++ - Prolog - Java - PHP - Python - SQL - ASP.NET - C# - javascript
alister


Desconectado Desconectado

Mensajes: 513


Ver Perfil
Re: Evento onfocus en fila de una tabla
« Respuesta #7 en: 26 Enero 2013, 04:06 am »
no entiendo nada.

no hay un selector css para eso?

http://www.spanish-translator-services.com/espanol/t/007/evenodd.html

ojo! que llevo años siendo linuxero y el tema de .net me queda ancho, igual me pierdo algo...

y otra cosa...

no vale cambiar de pregunta a mitad de la discusion eh? jajajajaja

si has cambiado de idea y solo quieres estilizar las filas alternas, pues con esto que has hecho ya lo tienes perfecto y no necesitas JQuery.

Si vuelves a la idea inicial de marcar solo la fila que está interaccionando con el usuario, pues el ejemplo en JQuery está en el enlace que te puse.
« Última modificación: 26 Enero 2013, 04:13 am por alist3r » En línea
Back 2 business!
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Evento onfocus en fila de una tabla
« Respuesta #8 en: 26 Enero 2013, 04:28 am »
El problema con nth-child() es que no es soportado en IE8 y menores (es la unica ultima versión disponible para este en Windows XP.).

Saludos
En línea
alister


Desconectado Desconectado

Mensajes: 513


Ver Perfil
Re: Evento onfocus en fila de una tabla
« Respuesta #9 en: 26 Enero 2013, 04:39 am »
Cita de: drvy | BSM en 26 Enero 2013, 04:28 am
El problema con nth-child() es que no es soportado en IE8 y menores (es la unica ultima versión disponible para este en Windows XP.).

Saludos



LOL!

no tenia ni idea...

Pero si la especificación es de 2001 o asi!

Dios mio... Estos ie no hacen mas que complicarnos la vida, su historia parece el guión de una peli de terror para webdevelopers... xDD
En línea
Back 2 business!
Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Problema Con Selección De Fila En Jtable Y Evento « 1 2 »
Java 		ZedGe 12 15,408 Último mensaje 24 Noviembre 2011, 18:57 pm
por Leyer
insertar nueva fila en tabla con un enter
Desarrollo Web 		josco 2 4,615 Último mensaje 15 Junio 2012, 02:25 am
por josco
Fila de tabla que envia variable php?
PHP 		balalaika 1 2,507 Último mensaje 24 Febrero 2013, 10:16 am
por дٳŦ٭
seleccionar fila de tabla y llenar formulario(solucionado)
PHP 		basickdagger 1 2,862 Último mensaje 18 Abril 2013, 18:07 pm
por basickdagger
Ayuda formulario para insertar fila a una tabla word con VBA
Programación Visual Basic 		Happy01 2 3,072 Último mensaje 13 Febrero 2016, 16:58 pm
por Happy01
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines