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