3 svar · 262 visningar · startad av learn
Jag har ett antal td:s som om man klickar på dem så byter de bakgrundsfärg. Så långt är det ju enkelt:
onClick="this.className='calOver'"
Men jag vill ju även att om man klickar på en annan så ska den man klickade på innan byta tillbaka till ursprungsfärgen. Hur gör jag detta på ett bra sätt?
Så här skulle man ju vilja göra:
onClick="all.className='mOut'; this.className='mOver'"
men så enkelt är det ju inte...
<html>
<head>
<title></title>
<style type="text/css">
td {background-color:DDDDDD;}
</style>
</head>
<body >
<table width=200 >
<tr>
<td onclick="this.style.backgroundColor ='9EC8C8'" onmouseout="this.style.backgroundColor = 'DDDDDD'">
cell 1 </td>
<td onclick="this.style.backgroundColor ='9EC8C8'" onmouseout="this.style.backgroundColor = 'DDDDDD'">
cell 2 </td>
</tr>
</table>
</body>
</html>
ja, fast då försvinner ju färgen så fort man rör på musen utanför. jag vill ju ha kvar färgen tills man klickar på en annan td...
Denna kod gör alla td i en viss tr till en grupp:
<html>
<head>
<style type="text/css">
td.clicked {background-color: green;}
td.inactive {background-color: transparent;}
</style>
<script>
function activateTd(th){
allTds = th.parentNode.children;
for (i=0; i<allTds.length; i++){
if (allTds[i]==th)
allTds[i].className = "clicked";
else
allTds[i].className = "inactive";
}
}
</script>
</head>
<body>
<table>
<tr>
<td class="inactive" onclick="activateTd(this);">td 1</td>
<td class="inactive" onclick="activateTd(this);">td 2</td>
<td class="inactive" onclick="activateTd(this);">td 3</td>
<td class="inactive" onclick="activateTd(this);">td 4</td>
</tr>
</table>
</body>
</html>