Cambiar color texto casilla tabla al hacer click con el ratón

Loboblanco2 · #1 (**permalink**) 30/10/2012, 07:05

Hola

Querría saber como programar, preferiblemente solo con html y css, que
el texto de una casilla/celda de una tabla cambie de color al hacer
click con el ratón en ella.

He encontrado códigos de cambio de color de fondo, pero no de cambio
del color del texto.

Estoy intentandolo con este código, pero no me funciona

<html>
<head>
<script type="text/javascript">
function cambiacolor_texto(celda){ celda.style.color="#00008B" }

</script>

</head>

<body>
<table "border="1" rules="all"" >
<TR align=center>
<TD WIDTH=400 bgcolor="#ffffff" onmousedown="cambiacolor_texto(this)">
Casilla 1
</TD>
<TD WIDTH=400 bgcolor="#ffffff" onmousedown="cambiacolor_texto(this)">
<font color="#FF8C00">Casilla 2</font>
</TD>
</TR>
</body>
</html>

¿Alguien sabe cómo puedo hacerlo?

Muchas gracias

veruti85 · #2 (**permalink**) 30/10/2012, 08:44

Yo usaria en vez del onmousedown el onclick, pero eso da igual en realidad, es segun lo que te convenga

El problema esta en la construccion del html

No esta cerrado el table y delante del atributo border del tag table, hay una comilla, con eso ya te funciona.

Otra cosa, en el td de la casilla 2 no te va a funcionar porque el texto esta dentro del tag font y este sobreescribe el color que da el padre, en este caso el td

Espero que con eso te valga

Saludos

tommy_tony · #3 (**permalink**) 30/10/2012, 11:16

Algo así sería , por cierto separa los estilos de las etiquetas , que etiquetas como font ya no se usan , y el separar te va a dar una mejor visión.

Código:

<html>
<head>
<script>
function cambiacolor_texto(elemento){
	 elemento.style.color="orange" ;}

function cambiacolor_texto2(elemento){elemento.style.color="green";}

</script>

</head>

<body>
	<table "border="1" rules="all"" >
		<TR align=center>
			<TD WIDTH=400 bgcolor="#ffffff" onclick="cambiacolor_texto(this);">Casilla 1</TD>
			<TD WIDTH=400 bgcolor="#ffffff"><font color="#FF8C00" onclick="cambiacolor_texto2(this);">Casilla 2</font></TD>
		</TR>
	</table>
</body>
</html>

Loboblanco2 · #4 (**permalink**) 30/10/2012, 11:35

veruti85, tommy_tony : Muchas, muchas gracias, por la respuesta, por lo sencillo que me lo habeís contado y por lo rápido.

Efectivamente corrigiendo esos fallos funciona estupendamente. Y con el código de tommy_tony va genial.

Solo me queda ponerme un poco colorado por los fallos tan tontos que tenía el código. Además de intentar evitarlos, mejoraré el código separando los estilos de las etiquetas.

camilosama · #5 (**permalink**) 05/02/2015, 12:01

buen dia, quisier que alguno me ayudara, necesito que en un campo me aparesca activar y desactivar, es decir al dar click en activar el txto camvia a desactivar y viceversa, gracias espero respuesta