como cambiar el color de una celda cuando se selecciona un checkbok que esta dentro

paulodic · #1 (**permalink**) 24/06/2005, 16:27

Quisiera cambiar el color de una celda al seleccionar un checkbok que esta dentro de ella, algo asi como hacen los webmail...y a su vez si se puede que me aparezca un combo cuando lo selecciones..osea que son dos acciones que se producen. Ojala que no sea algo muy complejo lo que estoy preguntando

Paulo Di Carlo Saludos desde Argentina

angsanchez · #2 (**permalink**) 25/06/2005, 07:10

Hola, paulodic
El color es un tema de estilo CSS:

Código PHP:

  <td id="celda1"><form> 
<input type="checkbox" onClick="document.getElementById('celda1').style.backgroundColor='#ffff00';"> 
</form></td>

Lo del combo lo puedes hacer incluyendo éste en la página pero oculto, y luego hacerlo aparecer de la misma manera que el color:

Código PHP:

  <td id="celda1"><form> 
<input type="checkbox" onClick="document.getElementById('celda1'').style.backgroundColor='#ffff00'; document.getElementById('combo1').style.display='block';"> 
<select id="combo1" style="display:'none';"> 
<option>a</option> 
<option>b</option> 
</select> 
</form></td>

paulodic · #3 (**permalink**) 25/06/2005, 14:08

muchas gracias por tu respuesta.. pero algo estoy haciendo mal por que no logro hacer andar ninguno de los codigos.....me dijiste arriba que era un tema de css.. pero los cambios en el cliente los hace java script o no

la verdad que se me confunde un poco las cosas mira estos son los codigos que probe
PARA CAMBIAR DE COLOR LA CELDA
<html>
<body>
<table border="1"><tr>
<td id="celda1">
<form>
<input type="checkbox" onClick="document.getElementById('celda1').style.b ackground Color='#ffff00';">
</form></td>
</tr></table>
</body>
</html>

PARA OCULTAR Y MOSTRAR EL COMBO
<html>
<body>
<table border="1">
<tr>
<td id="celda1"><form>
<input type="checkbox"

onClick="document.getElementById('celda1'').style. background Color='#ffff00';

document.getElementById('combo1').style.display='b lock';">
<select id="combo1" style="display:'none';">
<option>a</option>
<option>b</option>
</select>
</form></td>
</tr>
</table>
</body>
</html>

angsanchez · #4 (**permalink**) 27/06/2005, 13:08

Hola,
En efecto, es javascript el que lo hace todo.
En parte ha sido culpa mía por escribir el código de memoria y sin probarlo, y en parte del foro que mete espacios cuando la línea se hace larga.
Así funciona (marco en rojo los puntos clave)

PARA CAMBIAR DE COLOR LA CELDA

Código:

<table border="1"><tr>
<td id="celda1">
<form> 
<input type="checkbox" onClick="document.getElementById('celda1').style.backgroundColor='#ffff00';"> 
</form></td> 
</tr></table>

(backgroundColor va sin espacios)

PARA OCULTAR Y MOSTRAR EL COMBO

Código:

<table border="1">
<tr>
<td id="celda1"><form> 
<input type="checkbox" 
onClick="document.getElementById('celda1'').style.backgroundColor='#ffff00';
document.getElementById('combo1').style.display='block';"> 
<select id="combo1" style="display:none;"> 
<option>a</option> 
<option>b</option> 
</select> 
</form></td> 
</tr>
</table>

(backgroundColor va sin espacios y sobraban las comillas en NONE)
Y quita el espacio que se ha metido en BLOCK

Falta aún pulir el código del color para que vuelva a ser blanco al desmarcar el checkbox. Luego lo intento

angsanchez · #5 (**permalink**) 27/06/2005, 13:19

Ahora al desmarcar el checkbox devuelve el color a blanco y oculta el combo:

Código HTML:

<head>
<script language="JavaScript" type="text/JavaScript">
function cambia(control)
{	var laCelda = document.getElementById('celda1');
	var elCombo = document.getElementById('combo1');
	if ( control.checked )
	{	laCelda.style.backgroundColor='#ffff00';
		elCombo.style.display='block';
	}
	else 
	{	laCelda.style.backgroundColor='#ffffff';
		elCombo.style.display='none';
	}
}
</script>
</head>

<body>
<table border="1">
<tr>
<td id="celda1"><form>
<input type="checkbox" onChange="cambia(this)">
<select id="combo1" style="display:none;">
<option>a</option>
<option>b</option>
</select>
</form></td>
</tr>
</table>
</body>

paulodic · #6 (**permalink**) 28/06/2005, 16:47

gracias angel!!! siguiendo con mis duda queria saber si es que es funcion se la podria ocupar para muchas celdas...por que? resulta que yo lo estoy coupando con un lenguje dinamico (no importa cual) y yo genero una funcion para cada celda. y eso es muy incomodo y ademas lentaliza mucho las paginas. imaginate 100 celdas =100 funciones para cada celda.... y he visto que el webmail de yahoo ocupa una funcion para todas las celdas... Yo queria saber si es que hay alguna menera de hacer una funcion que me sirva para cualquier cantidad de celdas...(en realidade este problema lo tengo con todos mis codigos javascrpt).. he visto por ahi que mandan como parametros (this) oa algo asi..... espero haberme echo entender... yo genero todas las celdas con in Id y Name diferente.. pero quiero utilizar una sola funcion para todas las celdas?
Muchas Gracias Desde Argetnina Paulo

tunait · #7 (**permalink**) 29/06/2005, 03:21

Qué tal,

mira a ver si te sirve este que propuse el otro día en otro post
http://www.forosdelweb.com/showpost....07&postcount=2

angsanchez · #8 (**permalink**) 07/07/2005, 16:56

Hola de nuevo, paulodic
Como te dice Tunait

, usando parentNode se puede conseguir la referencia a la celda "madre". El problema es que esto del árbol de jerarquías y nodos no lo domino. Inténtalo pregunta específicamente sobre ello. De ese modo, no necesitarías usar el ID de la celda en la función.

chalchis · #9 (**permalink**) 09/08/2005, 17:02

ya revise el codigo y funcionan para celdas dinamicas, pero en mi caso
como puedo sombrear la celda madre es decir sombrear la celda donde imprimimo la etiqueta celda1, celda2 segun el check que haya yo seleccionado

espero sus comentarios amigos
gracias y saludos

<html>
<head>
<title>Pagina inicio</title>
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">

<script type="text/javascript">

</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="body" >
<script type="text/javascript" language="JavaScript1.2" src="Javas/menu_cnt.js"></script>
<form name="ordenamiento" method="POST" action="">
<table width="100%" border="1" bgcolor="#F5F7FD">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr><td >celda1<table width="369" border="0" align="center"><tr><td width='65' class='texformsadmin'><img src="preins.jpg" width="64" height="64"></td>
<td width='375' class='texformsadmin'>Pre-inscripción a licenciaturas en línea (solo alumnos de nuevo ingreso)<input type="checkbox" onclick="colorea(this)" ></td></tr></table></td><td >celda2<table width="369" border="0" align="center"><tr><td width='289' class='texformsadmin'>¿Ya elegiste tu carrera profesional?. Aquí te decimos cómo.</td><td width="64" ><img src="valep.gif" width="64" height="64"></td>
</tr></table></td></tr> <tr class="texformsadmin"><td colspan="2"><div align="center"><img src="http://www.cuhm.mx/Imagen/line_shade.jpg" width="90%" height="5"></div></td></tr> <tr><td >celda3<table width="369" border="0" align="center"><tr><td width='65' class='texformsadmin'><img src="ook.jpg" width="64" height="64"></td>
<td width='375' class='texformsadmin'>Programa Editorial CUHM

<input type="checkbox" onclick="colorea(this)" ></td></tr></table></td><td >celda4<table width="369" border="0" align="center"><tr><td width="375" class="texformsadmin">Conoce los costos de nuestras Licenciaturas, Maestrias y Especialidades</td></tr></table></td></tr> <tr class="texformsadmin"><td colspan="2"><div align="center"><img src="http://www.cuhm.mx/Imagen/line_shade.jpg" width="90%" height="5"></div></td></tr> <tr><td >celda5<table width="369" border="0" align="center"><tr><td width='375' class='texformsadmin'>Calendario del ciclo escolar Agosto 2005-Enero 2006<input type="checkbox" onclick="colorea(this)" ></td></tr></table></td><td >celda6<table width="369" border="0" align="center"><tr><td width='289' class='texformsadmin'>Colecciona las postales conmemorativas por el décimo aniversario del CUHM</td><td width="64" ><img src="ostal.jpg" width="64" height="64"></td>
</tr></table></td></tr><tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>

</body>
</html>

paulodic · #10 (**permalink**) 09/08/2005, 18:18

simplificando un poco el codigo... no entiendo por que marca el <tr> y no el <td> osea que marca el rengon y no la celda..obvio que si creamos un renglon por cada celda principal si la marcara y es una solucion valida..pero habra alguna forma de marcar solo la celda????

<html>
<head>

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Pragma" content="no-cache">

<script type="text/javascript">

</script>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="body" >
<script type="text/javascript" language="JavaScript1.2" src="Javas/menu_cnt.js"></script>

<table width="100%" border="1" bgcolor="#F5F7FD">

<tr>
<td >celda1<input type="checkbox" onclick="colorea(this)"></td>
<td >celda2</td>
</tr>

<tr>
<td>CELDA 3<input type="checkbox" onclick="colorea(this)" ></td>
<td >CELDA 4</td>
</tr>

<tr>
<td >CELDA 5<input type="checkbox" onclick="colorea(this)" ></td>
<td >CELADA 6</td>
</tr>

<tr>
<td >CELDA 7<input type="checkbox" onclick="colorea(this)" ></td>
<td >CELADA 8</td>
</tr>

</table>

</body>
</html>

chalchis · #11 (**permalink**) 09/08/2005, 23:11

Hola amigo yo se que normalmente seleccionamos toda una fila para marca dicho registro pero en mi caso no voy a utilizar esa forma, lo digo porque tengo otro objetivo en particular, creo que me pase al mandar mucho codigo,
en los post publicados mas arriba dan la solucion de como marcar una celda cuando vas a imprimir filas dinamicas.

el detalle es este, el script marca la celda si tenemos la tabla de esta manera:
<table width="230" height="37" border="1">
<tr>
<td width="220" bgcolor="#FF0000">texto
<input type="checkbox" name="checkbox" value="checkbox" checked></td>
</tr>
</table>

pero en mi caso la tabla se forma de esta manera y asi es como deseo que marque como debo hacerlo?

<table width="370" border="1">
<tr>
<td height="48" bgcolor="#FF0000"><div align="center">
<table width="230" height="37" border="1">
<tr>
<td width="220">texto
<input type="checkbox" name="checkbox" value="checkbox" checked></td>
</tr>
</table>
</div></td>
</tr>
</table>

se que es algo tonto pero es para un fin que tengo en mente
gracias.

espero sus comenatarios
saludos