Foros del Web » Programando para Internet » Javascript »

Cambio de color de celda

Estas en el tema de Cambio de color de celda en el foro de Javascript en Foros del Web. Estimad@s: Estoy tratando de realizar lo siguiente, tengo una tabla con celdas coloreadas en gris, cuando paso el mouse sobre ellas cambia a negro. Lo ...
  #1 (permalink)  
Antiguo 01/02/2012, 06:11
Avatar de goncofre  
Fecha de Ingreso: febrero-2008
Ubicación: Santiago, Chile
Mensajes: 22
Antigüedad: 16 años, 1 mes
Puntos: 0
Cambio de color de celda

Estimad@s:

Estoy tratando de realizar lo siguiente, tengo una tabla con celdas coloreadas en gris, cuando paso el mouse sobre ellas cambia a negro. Lo que me complica es hacer un efecto de selección de celdas cuando hago click en una de ellas, es decir, dejar en negro donde vaya pasando el mouse, pero a vez volverlas a gris si paso nuevamente por ellas. Algo así como seleccionar varios archivos.

El código que llevo es el siguiente:

Código:
<head>
	<style>
		th {background-color:#CCC;cursor:pointer;width:40px;height:40px;}
		td {text-align:center;width:20px;font-family:Arial;}
	</style>
    <script type="text/javascript" language="javascript">
		function cambiaColor1(id){
			if(document.getElementById("marcando").value=="0")
					id.style.backgroundColor="#000";
			if(document.getElementById("marcando").value=="1"){
				if(id.style.backgroundColor=="#000")
					id.style.backgroundColor="#ccc";
				if(id.style.backgroundColor=="#ccc")
					id.style.backgroundColor="#000";
			}
		}
		function cambiaColor2(id){
			if(document.getElementById("marcando").value=="0"){
				id.style.backgroundColor="#ccc";
			}
			if(document.getElementById("marcando").value=="1"){
				id.style.backgroundColor="#000";
			}
		}
		function marcaTodos(id){
			if(document.getElementById("marcando").value=="0"){
				document.getElementById("marcando").value="1";
			}else{
				document.getElementById("marcando").value="2";
			}
			id.style.backgroundColor="#000";
		}
		function Resetear(){
			var enlaces = document.getElementsByTagName("th");
			for(i=0;i<enlaces.length; i++){
				enlaces[i].style.backgroundColor="#CCC";
			}
			document.getElementById("marcando").value="0";
		}
    </script>
</head>
<body>
	<input type="hidden" id="marcando" name="marcando" value="0">
	<table class="distabla">
		<tr>
			<td>01</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>11</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>21</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>31</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>02</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>12</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>22</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>32</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>03</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>13</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>23</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>33</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>04</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>14</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>24</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>34</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>05</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>15</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>25</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>35</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>06</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>16</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>26</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>36</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>07</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>17</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>27</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>37</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>08</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>18</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>28</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>38</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>09</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>19</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>29</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>39</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
		<tr>
			<td>10</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>20</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>30</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
			<td>40</td><th onMouseOver="cambiaColor1(this);" onMouseOut="cambiaColor2(this);" onClick="marcaTodos(this);">&nbsp;</th>
		</tr>
	</table>
    <input type="button" value="Reset" onClick="Resetear();">
</body>
  #2 (permalink)  
Antiguo 01/02/2012, 06:34
 
Fecha de Ingreso: abril-2009
Ubicación: Colombia
Mensajes: 949
Antigüedad: 14 años, 11 meses
Puntos: 27
Respuesta: Cambio de color de celda

Y si aplicas css en la fila no te sirve?

asi:

Código HTML:
Ver original
  1. <table border="1">
  2. <tr onmouseover="this.style.backgroundColor = '#DFDCCB' " onmouseout="this.style.backgroundColor = '#FFFFFF' ">
  3. <td>valor 1</td> <td>valor 2</td>
  4. </tr>
  #3 (permalink)  
Antiguo 01/02/2012, 06:44
Avatar de goncofre  
Fecha de Ingreso: febrero-2008
Ubicación: Santiago, Chile
Mensajes: 22
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Cambio de color de celda

Si eso de colorear y colorear me funciona bien, pero el efecto que te indico es el que no me resulta.

Mi idea es que al hace click se vayan quedando marcadas las que yo vaya seleccionando, y se vayan desmarcando si paso nuevamente sobre ellas. Parecido a lo que se hace cuando uno selecciona varios archivos cuando abre una carpeta.
  #4 (permalink)  
Antiguo 01/02/2012, 08:09
 
Fecha de Ingreso: octubre-2010
Mensajes: 107
Antigüedad: 13 años, 5 meses
Puntos: 14
Respuesta: Cambio de color de celda

Es algo complicado porque tendrias que hayar el area y las coordenadas del recuadro que va haciendo el cursor y tambien las coordenadas de las celdas y despues mirar cual celda queda dentro del recuadro y darle el efecto de seleccion(que es lo de menos).

Etiquetas: css, mouseout, mouseover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:49.