onClick = byta färg

3 svar · 264 visningar · startad av learn 20 apr. 2005

learnMedlem sedan jan. 20051 130 inlägg

Trådstart20 apr. 2005 10:23#1

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...

bossseMedlem sedan juni 2003771 inlägg

20 apr. 2005 16:24#2

<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>

learnMedlem sedan jan. 20051 130 inlägg

21 apr. 2005 07:07#3

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...

nitro2k01Medlem sedan aug. 20039 340 inlägg

21 apr. 2005 07:18#4

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>