---
title: "onClick = byta färg"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/126756-onclick-byta-färg"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "learn"
published: "2005-04-20T10:23:42.000Z"
updated: "2005-04-21T07:18:17.000Z"
replies: 3
views: 264
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/126756-onclick-byta-färg"
---

# onClick = byta färg

## #1 — learn, 2005-04-20T10:23Z

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

Permalänk: https://www.webforum.nu/p/126756

## #2 — bossse, 2005-04-20T16:24Z

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

Permalänk: https://www.webforum.nu/p/1597442

## #3 — learn, 2005-04-21T07:07Z

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

Permalänk: https://www.webforum.nu/p/1597751

## #4 — nitro2k01, 2005-04-21T07:18Z

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

Permalänk: https://www.webforum.nu/p/1597753

---

Tråden på webben: https://www.webforum.nu/amne/javascript/126756-onclick-byta-färg
