JavaScript - CAMBIAR DE COLOR LAS CELDAS DE UNA TABLA

   
Vista:

CAMBIAR DE COLOR LAS CELDAS DE UNA TABLA

Publicado por ferley (2 intervenciones) el 16/12/2014 23:07:17
Buenas tardes quisiera pedir consejo acerca de como resolver mi problema.

tengo el siguiente codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
	<title>Tabla</title>
	<script>
		function change (elemento) {
			elemento.style.backgroundColor="#f34";
		}
		function change2 (elemento) {
			elemento.style.backgroundColor="#f34";
		}
	</script>
</head>
<body>
<header>
	<h1>TABLA</h1>
</header>
<section id="tabla">
	<table border="1">
		<tr>
			<td onclick="change(this);">Celda 1</td>
			<td onclick="change2(this);">celda 2</font></td>
		</tr>
	</table>
</section>
</body>
</html>

con este codigo al hacer click en alguna celda de la tabla me cambia de color mi duda es como puedo hacer para que al darle click nuevamente a la celda regrese a su color original.

muchas gracias por sus respuestas.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

CAMBIAR DE COLOR LAS CELDAS DE UNA TABLA

Publicado por xve (1597 intervenciones) el 17/12/2014 08:04:23
Hola Ferley, la manera correcta, seria coger el valor actual de la celda para saber cual tiene y poder cambiarlo, pero eso es un tanto complicado, ya que no todos los navegador devuelven el color en el mismo formato, por lo que una manera sencilla, es utilizar una variable que contenga el ultimo color dado.

Aquí te adjunto tu código modificado para que funcione...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
	<title>Tabla</title>
	<script>
		var color1="";
		var color2="";
		function change (elemento) {
			if(color1=="#f34")
			{
				elemento.style.backgroundColor=color1="#fff";
			}else{
				elemento.style.backgroundColor=color1="#f34";
			}
		}
		function change2 (elemento) {
			if(color2=="#f34")
			{
				elemento.style.backgroundColor=color2="#fff";
			}else{
				elemento.style.backgroundColor=color2="#f34";
			}
		}
	</script>
</head>
<body>
<header>
	<h1>TABLA</h1>
</header>
<section id="tabla">
	<table border="1">
		<tr>
			<td onclick="change(this);">Celda 1</td>
			<td onclick="change2(this);">celda 2</font></td>
		</tr>
	</table>
</section>
</body>
</html>

Si hay algo que no entiendas...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

CAMBIAR DE COLOR LAS CELDAS DE UNA TABLA

Publicado por ferley (2 intervenciones) el 18/12/2014 14:14:13
muchisimas gracias muy claro todo.

cualquier duda que me surja estare por aqui preguntando :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar