JavaScript - CAMBIAR DE COLOR LAS CELDAS DE UNA TABLA

 
Vista:
sin imagen de perfil

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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

CAMBIAR DE COLOR LAS CELDAS DE UNA TABLA

Publicado por xve (2100 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
sin imagen de perfil

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

CAMBIAR DE COLOR LAS CELDAS DE UNA TABLA

Publicado por cesardavid (1 intervención) el 01/06/2018 07:34:41
Justo estaba buscando lo mismo y lo encontre! lo que quiero es que quede guardadas las celdas que se pintaron del color, por que cada vez que actualizo se las celdas vuelve al color original ;(
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