Evento onfocus en fila de una tabla

M3LiNdR1 · 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 (html4strict) [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x)
{
x.style.background="yellow";
}
function myFunction2(x)
{
x.style.background="white";
}
</script>
</head>
<body>
<table>
	<tbody>
		<tr>
			<th>Product</th>
			<th></th>
			<th>Price</th>
			<th>Cost</th>
			<th></th>
		</tr>
		<tr onfocus="myFunction(this)" onblur="myFunction2(this)">
			<td>ProductName01</td>
			<td>1x</td>
			<td>35.20€</td>
			<td>35.20€</td>
			<td>x</td>
		</tr>
		<tr  onfocus="myFunction(this)" onblur="myFunction2(this)">
			<td>ProductName01</td>
			<td>1x</td>
			<td>35.20€</td>
			<td>35.20€</td>
			<td>x</td>
		</tr>
		<tr  onfocus="myFunction(this)" onblur="myFunction2(this)">
			<td>ProductName01</td>
			<td>1x</td>
			<td>35.20€</td>
			<td>35.20€</td>
			<td>x</td>
		</tr>
	</tbody>
</table>
</body>
</html>

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

Muchas gracias!

alister · 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.

alister · 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)

#!drvy · 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 (html4strict) [Seleccionar]

<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 (html4strict) [Seleccionar]

<div onfocus="alert('aaaa');">clickea me</div>
Si Funciona

Código (html4strict) [Seleccionar]

<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 (javascript) [Seleccionar]

<script>
    function myFunction(x) {
        // Obtenemos todos los TR de la tabla con id "mi_tabla"
        // despues del tbody.
        var elementos = document.getElementById('mi_tabla').
        getElementsByTagName('tbody')[0].getElementsByTagName('tr');

        // Por cada TR empezando por el segundo, ponemos fondo blanco.
        for (var i = 1; i < elementos.length; i++) {
            elementos[i].style.background='white';
        }
        // Al elemento clickeado le ponemos fondo amarillo.
        x.style.background="yellow";
    }
</script>

Código (html4strict) [Seleccionar]

<body>
    <table id="mi_tabla">
        <tbody>
            <tr>
                <th>Product</th>
                <th></th>
                <th>Price</th>
                <th>Cost</th>
                <th></th>
            </tr>
            <tr onclick="myFunction(this)">
                <td>ProductName01</td>
                <td>1x</td>
                <td>35.20€</td>
                <td>35.20€</td>
                <td>x</td>
            </tr>
            <tr onclick="myFunction(this)">
                <td>ProductName01</td>
                <td>1x</td>
                <td>35.20€</td>
                <td>35.20€</td>
                <td>x</td>
            </tr>
            <tr onclick="myFunction(this)">
                <td>ProductName01</td>
                <td>1x</td>
                <td>35.20€</td>
                <td>35.20€</td>
                <td>x</td>
            </tr>
        </tbody>
    </table>
</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

alister · 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!

#!drvy · 25 Enero 2013, 21:33 PM

CitarPD: 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

M3LiNdR1 · 26 Enero 2013, 02:57 AM

Buenas

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 (css) [Seleccionar]



.trselected {
    background: #ffa24f;
    color: black;
}
.impar {
    background: #C0C0C0;
}

.thead { 
	background: #ff5b18;
}

Codigo javascript:

Código (javascript) [Seleccionar]


function myFunction(x) {

/*Comprueba si existe un elemento con el class="trselected". El
metodo getElementsByClassName devuelve un array con todos
los elementos que llevan el estilo que le pases como parametro.*/

if (document.getElementsByClassName("trselected").length > 0) {
	var element = document.getElementsByClassName("trselected");
        
        /*Como solo hay uno, me quedo con el primer elemento del 
         array.*/
	if (element[0].id%2 != 0) element[0].className = "impar";
	else element[0].className = "";
}
x.className="trselected";
}

Por último el codigo HTML de la tabla:

Código (html4strict) [Seleccionar]


<table>
	<thead>
		<tr class="thead">
			<th>Product</th>
			<th></th>
			<th>Price</th>
			<th>Cost</th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr id = "1" class="impar" onclick="myFunction(this)">
			<td>ProductName01</td>
			<td>1x</td>
			<td>35.20€</td>
			<td>35.20€</td>
			<td>x</td>
		</tr>
		<tr id = "2" onclick="myFunction(this)">
			<td>ProductName01</td>
			<td>1x</td>
			<td>35.20€</td>
			<td>35.20€</td>
			<td>x</td>
		</tr>
		<tr id = "3" class="impar" onclick="myFunction(this)">
			<td>ProductName01</td>
			<td>1x</td>
			<td>35.20€</td>
			<td>35.20€</td>
			<td>x</td>
		</tr>
		<tr id = "4" onclick="myFunction(this)">
			<td>ProductName01</td>
			<td>1x</td>
			<td>35.20€</td>
			<td>35.20€</td>
			<td>x</td>
		</tr>
	</tbody>
</table>

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

alister · 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.

#!drvy · 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

alister · 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