cambiar color celda en el evento onclick

pablolennin · #1 (**permalink**) 06/07/2009, 13:41

quiero cambiar el fondo de la celda al dar un click ensima de ella

Adler · #2 (**permalink**) 06/07/2009, 14:18

Hola

Hace poco monté esto. Cambia el color de la celda a razón del evento que se produce sobre ella

Código javascript:

Ver original<html>
<head>
<style type="text/css">
#tabla td {background-color:#FFFFFF;}
</style>
<script type="text/javascript">
window.onload = function () {
var elementos = document.getElementById("tabla").getElementsByTagName("td");
    for (var i=0;i < elementos.length; i++)  { 
        
        elementos[i].onclick = Celda;
        elementos[i].onmouseover = Celda;
        elementos[i].onmouseout = Celda;
            
        }
 
}
 
function Celda(evento) {
var evento = evento || window.event;
    switch(evento.type) {
case 'mouseover':
    //this.style.backgroundColor = ((this.style.backgroundColor == '#ff0000') || (this.style.backgroundColor == 'rgb(255, 0, 0)'))   ? '#FFFF00' : '#CCFF66' ; 
//alert(this.style.backgroundColor);
    break;
 
 
case 'mouseout':
    this.style.backgroundColor = ((this.style.backgroundColor == '#ccffcc') || (this.style.backgroundColor == 'rgb(204, 255, 102)')) ? '#FFFFFF' : '#FF0000'; 
//alert(this.style.backgroundColor);
    break;
 
 
case 'click':
    this.style.backgroundColor = ((this.style.backgroundColor ==  '#ccffcc') || (this.style.backgroundColor == 'rgb(204, 255, 102)')) ? '#FF0000' : '#CCFF66';
//alert(this.style.backgroundColor);
    break;
  }
}
 
 
</script>
</head>
<body>
<table border="1" id="tabla">
<tr>
<td>celda1</td>
<td>celda2</td>
<td>celda3</td>
<td>celda4</td>
<td>celda5</td>
<td>celda6</td>
<td>celda7</td>
</tr>
</table>
</body>
</html>

Suerte

#3 (**permalink**) 06/07/2009, 14:19

Te remito a las Preguntas Frecuentes de Javascript:
http://www.forosdelweb.com/wiki/Camb...r_de_una_celda

Aunque se trata de un cambio "al pasar el ratón por encima", no es complicado adaptarlo para que se produzca con un clic

Saludos.