Sobre manejo de colores con javascript

Andrew777 · #1 (**permalink**) 18/06/2009, 12:27

Una consultilla, tengo el siguiente codigo con html y javscripts:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>

<script>

function colorear(obj)
{
fila = obj.parentNode.parentNode;
if(obj.checked)
fila.style.backgroundColor = "#FFCC99";
else
fila.style.backgroundColor = "#DDDDDD";
}

function cambiar_color_over(celda){

celda.style.backgroundColor="#ccffcc";

}
function cambiar_color_out(celda){

celda.style.backgroundColor="#dddddd";

}

</script>
</head>
<body>
<table>
<thead>
<tr align="center">
<th>Campo1</th>
<th>Campo2</th>
<th>Campo3.</th>
</tr>
</thead>

<tr bgcolor='#F0F0F0' onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">

<td><input id="miCheck1" type="checkbox" name="miCheck" onclick="colorear(this)"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr bgcolor='#F0F0F0' onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">

<td><input id="miCheck2" type="checkbox" name="miCheck" onclick="colorear(this)"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr bgcolor='#F0F0F0' onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">
<td><input id="miCheck3" type="checkbox" name="miCheck" onclick="colorear(this)"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Este codigo cambia de colores cada fila de la tabla al pasar el mouse sobre ellas
y al levantarlas. Tambien cambia de color cuando se hace click en el checkbox. Mi duda es q como puedo hacer que cuando el checkbox este marcado, este mantenga su color. Por fa necesito vuestra ayuda. Saludos

David · #2 (**permalink**) 18/06/2009, 12:39

Puedes agregar una condición antes de cambiar el color:

Código javascript:

Ver originalif (!celda.getElementsByTagName("input")[0].checked) {
    /* Cambiar color */
}

bng5 · #3 (**permalink**) 18/06/2009, 12:45

La fila mantiene su color cuando el checkbox está marcado, pero se lo cambiás nuevamente con el evento mouseout de la fila.

Código:

function cambiar_color_over(celda)
 {
  if(celda.cells[0].firstChild.checked == true)
    return;
  celda.style.backgroundColor="#ccffcc";
 }

function cambiar_color_out(celda)
 {
  if(celda.cells[0].firstChild.checked == true)
    return;
  celda.style.backgroundColor="#dddddd";
 }

Andrew777 · #4 (**permalink**) 18/06/2009, 12:54

Muchas, gracias David el Grande, sos un grande. Bueno, cualquier duda te estare consultando. Y finalmente el codigo queda asi:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>

<script>

function colorear(obj)
{
fila = obj.parentNode.parentNode;
if(obj.checked)
fila.style.backgroundColor = "#FFCC99";
else
fila.style.backgroundColor = "#DDDDDD";
}

function cambiar_color_over(celda){

if (!celda.getElementsByTagName("input")[0].checked)
{ /* Cambiar color */

celda.style.backgroundColor="#ccffcc";

}

}
function cambiar_color_out(celda){

if (!celda.getElementsByTagName("input")[0].checked)
{
celda.style.backgroundColor="#dddddd";

}
}

</script>
</head>
<body>
<table>
<thead>
<tr align="center">
<th>Campo1</th>
<th>Campo2</th>
<th>Campo3.</th>
</tr>
</thead>

<tr bgcolor='#F0F0F0' onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">

<td><input id="miCheck1" type="checkbox" name="miCheck" onclick="colorear(this)"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr bgcolor='#F0F0F0' onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">

<td><input id="miCheck2" type="checkbox" name="miCheck" onclick="colorear(this)"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>

<tr bgcolor='#F0F0F0' onmouseover="cambiar_color_over(this)" onmouseout="cambiar_color_out(this)">
<td><input id="miCheck3" type="checkbox" name="miCheck" onclick="colorear(this)"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>

</table>
</body>
</html>

Andrew777 · #5 (**permalink**) 18/06/2009, 13:01

Muchas gracias por vuestra ayuda, tambien me sirvio para poder solucionar el problema.

Andrew777 · #6 (**permalink**) 18/06/2009, 13:04

Un duda, quisiera saber donde pueda encontrar buenos manuales de DOM, debido a como estoy empezando mis armas con este lenguaje pues no lo entiendo muy bien. Por fa necesito de vuestra ayuda.