Cambiar color de fondo a celda con Onclick

MAURIXIO5540 · #1 (**permalink**) 13/01/2011, 14:17

Hola Amigos del foro espero me puedan colaborar, tengo el siguiente codigo:

Código php:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>Untitled</title>
   <script language="javascript" type="text/javascript">
   function ilumina(celda){
    if (celda.style.backgroundColor=="yellow")
        {
        celda.style.backgroundColor="green";
        }
    else
        {
        celda.style.backgroundColor="yellow";
        }
    }
  </SCRIPT>
  </head>
  <body>
    <table border="1" width="50%">
        <tr>
            <td bgcolor="green" onclick="ilumina(this)">&nbsp;</td>
            <td bgcolor="green" onclick="ilumina(this)">&nbsp;</td>
            <td bgcolor="green" onclick="ilumina(this)">&nbsp;</td>
            <td bgcolor="green" onclick="ilumina(this)">&nbsp;</td>
        </tr>
        <tr>
            <td bgcolor="yellow" onclick="ilumina(this)">&nbsp;</td>
            <td bgcolor="yellow" onclick="ilumina(this)">&nbsp;</td>
            <td bgcolor="yellow" onclick="ilumina(this)">&nbsp;</td>
            <td bgcolor="yellow" onclick="ilumina(this)">&nbsp;</td>
        </tr>
  </table>
  </body>
</html>

La idea es que al dar click sobre cualquiera de las celdas me cambie el color de fondo. Es decir de Amarillo a Verde y de Verde a Amarillo.

El Problema radica en que las celdas Amarillas inicialmente no cambian a Verde en el primer clickeo asi que necesita de 2. Aclaro al inicio del aplicativo y solo la primer vez, a diferencia de las verdes que si cambian en el primer click.

Creo que el problema tiene que ver en la forma en que declar los background ya que en la celda los delaro como bgcolor mientras que en el "if de la funcion javascript" los comparo como: "style.backgroundColor", ya he intentado de varias maneras pero aun no comprendo como hacerlo.

De antemano agradezco su colaboración.

_cronos2 · #2 (**permalink**) 13/01/2011, 14:27

Pon bgColor en JS, o style='background-color:...' en el HTML.
Saludos (:

IsaBelM · #3 (**permalink**) 13/01/2011, 14:34

mira como la explicación iba a ser larga

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
window.onload = function() {
var td= document.getElementsByTagName('td');
for (var i= 0; i < td.length; i++) {
td[i].onclick = function() {
this.className = this.className == "yellow" ? "green" : "yellow";
}
}

};
</SCRIPT>
<style type="text/css">
.yellow { background: yellow;}
.green {background: green;}
</style>
</head>
<body>
<table border="1" width="50%">
<tr>
<td class="green" > </td>
<td class="green"> </td>
<td class="green"> </td>
<td class="green"> </td>
</tr>
<tr>
<td class="yellow"> </td>
<td class="yellow"> </td>
<td class="yellow"> </td>
<td class="yellow"> </td>
</tr>
</table>
</body>
</html>

si te interesa entender el código busca información sobre getElementsByTagName, funciones anónimas y sobre la propiedad className

MAURIXIO5540 · #4 (**permalink**) 13/01/2011, 14:40

Cita:

Iniciado por _cronos2

Pon bgColor en JS, o style='background-color:...' en el HTML.
Saludos (:

Funciono Perfectamente con: style='background-color:....' en el HTML mientras que con bgColor aun sigue generando conflicto.....De igual manera agradezco tu colaboración ya que tu respuesta fue la adecuada.......

pelutaca · #5 (**permalink**) 09/05/2011, 05:48

Estaba buscando algo parecido a este código pero con la salvedad de que la primera celda de la primera fila está en color amarillo, y quisiera que cuando clique en otra celda de la misma fila, la primera cambie al color del resto, el verde.
No se si me he explicado, espero que sí.
Muchas gracias.