Hola
Hace poco monté esto que quizás te sea útil. Funciona en IE, FF, Opera y Chrome
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