---
title: "Ändra färg på rad?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/114427-ändra-färg-på-rad"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Bosse168"
published: "2004-10-26T10:21:36.000Z"
updated: "2004-11-27T18:52:29.000Z"
replies: 24
views: 684
page: 1
pages: 2
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/114427-ändra-färg-på-rad"
---

# Ändra färg på rad?

_Sida 1 av 2._

## #1 — Bosse168, 2004-10-26T10:21Z

Hur går man tillväga för att ändra färgen på en rad vid OnClick?
Sökte och fann [denna tråden](http://www.webforum.nu/showthread.php?s=&postid=322828#post322828) men förstår inte riktigt hur man ska gå tillväga för att få det att funka.

Jag loopar ut rader så det är ju inga problem att sätta ett id på en \<TR\> rad men har ingen aning var jag ska sätta in den koden som man får fram ur tråden ovan.

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

## #2 — Palle, 2004-10-26T18:46Z

```
[red]<table>
<tr onclick="this.style.backgroundColor='blue';">
<td>content..</td>
</tr>
</table>[/red]
```

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

## #3 — Bosse168, 2004-10-27T05:09Z

Ok kan man få det att funka om man bockar i en checkruta?

```
<table>
<tr>
<td><input type="checkbox" name="del" value="<%=myArray(1,i)%>"></td>
</tr>
</table>
```

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

## #4 — Palle, 2004-10-27T06:52Z

Flyttad från HTML, XHTML & CSS.

mvh Palle
Moderator webForum

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

## #5 — Palle, 2004-10-27T06:56Z

Visst kan du det.. men då måste du ändra lite grann i koden först. :)

ex. 

```
[red]<table>
<tr>
<td [blue]id="td1"[/blue]><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="document.getElementById('[blue]td1[/blue]').style.backgroundColor='blue';"></td>
</tr>
</table>[/red]
```

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

## #6 — Bosse168, 2004-10-27T07:07Z

Den funkar men kanske lite för bra för den är blå fast man bockar ur checkboxen. ;)

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

## #7 — Palle, 2004-10-27T07:12Z

Ja det är den, du undrade hur man fick raden färgad när man klickade i checkboxen.. 
inte hur man sedan återställer den när man klickar ur den. ;)

Här kommer en variant på lösning: :)

```
[red]<html>
<head>

<script type="text/javascript">
	function toggleBgColor(elm,frm)
	{
		if(frm.checked)
		{
			document.getElementById(elm).style.backgroundColor='blue';
		}
		else
		{
			document.getElementById(elm).style.backgroundColor='';
		}
	}
</script>

</head>
<body>

	<table>
	<tr>
	<td id="[blue]td1[/blue]"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('[blue]td1[/blue]',this)"></td>
	</tr>
	</table>

</body>
</html>[/red]
```

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

## #8 — Bosse168, 2004-10-27T07:24Z

Hahaha det är sant nu funkar det perfekt men har en funktion som gör att jag kan markera alla checkbox's kan man baka in ändra färg funktionen i den också?

```

	function CheckAll()
	{
		for (var i=0;i<document.delmailform.elements.length;i++)
		{
			var e = document.delmailform.elements[i];
			if ((e.name != 'checkall') && (e.type=='checkbox'))
			e.checked = document.delmailform.checkall.checked;
		}
	}
	function CheckCheckAll()
	{
		var TotalBoxes = 0;
		var TotalOn = 0;
		for (var i=0;i<document.delmailform.elements.length;i++)
		{
			var e = document.delmailform.elements[i];
			if ((e.name != 'checkall') && (e.type=='checkbox'))
			{
				TotalBoxes++;
			if (e.checked)
			{
				TotalOn++;
			}
			}
		}
		if (TotalBoxes==TotalOn)
		{document.delmailform.checkall.checked=true;}
		else
		{document.delmailform.checkall.checked=false;}
	}
```

Ber om ursäkt för alla dessa men ;)

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

## #9 — Palle, 2004-10-27T07:39Z

En variant: 

```
[red]<html>
<head>

<script type="text/javascript">
	function toggleBgColor(elm,frm)
	{
		if(frm.checked)
		{
			document.getElementById(elm).style.backgroundColor='blue';
		}
		else
		{
			document.getElementById(elm).style.backgroundColor='';
		}
	}

	function CheckAll()
	{
		with (document.delmailform)
		{
			var cnt = 1;
			for (var i=0; i < elements.length; i++)
			{
				if (elements&#091;i].type == 'checkbox' && elements&#091;i].name == 'del')
				elements&#091;i].checked = true;
				if(document.getElementById('td'+ cnt))
				{
					document.getElementById('td'+ cnt).style.backgroundColor='blue';
				}
				cnt=cnt+1
			}
		}
	}

</script>

</head>
<body>

	<form name="delmailform">
	<table>
	<tr>
	<td id="td1"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td1',this)"></td>
	</tr>
	<tr>
	<td id="td2"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td2',this)"></td>
	</tr>
	<tr>
	<td id="td3"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td3',this)"></td>
	</tr>
	<tr>
	<td id="td4"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td4',this)"></td>
	</tr>
	</table>
	<a href="javascript:void(CheckAll());">Markera alla</a>
	</form>

</body>
</html>[/red]
```

**OBS!** Glöm inte att skriva ihop java script \<--

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

## #10 — Bosse168, 2004-10-27T08:01Z

Det går att markera alla nu men inte avmarkera alla genom att trycka på "Markera alla" igen

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

## #11 — Palle, 2004-10-27T08:15Z

hehe, nope.
Lite får du allt göra själv. ;)

Mickla lite med koden och återkom om du får problems. :)

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

## #12 — Bosse168, 2004-10-27T08:22Z

Kan säga att det kommer jag aldrig få att funka JavaScript är rena grekiskan för mig. :s

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

## #13 — Bosse168, 2004-10-27T09:24Z

Får det inte att funka får syntax error i javascriptet hur jag än gör och det brukar ju tyda på att det är fel. ;)

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

## #14 — Palle, 2004-10-27T11:23Z

Hur ser din kod ut när du får fel?

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

## #15 — Bosse168, 2004-10-27T11:54Z

Försöker få in en else sats men har ingen aning hur den ska se ut eller vart den ska vara.

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

## #16 — Bosse168, 2004-11-26T00:51Z

Snälla kan ingen visa mig hur koden ska var?  :stud

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

## #17 — Peter S, 2004-11-26T08:51Z

```
<html>
<head>

<script type="text/javascript">
	function toggleBgColor(elm,frm)
	{
		if(frm.checked)
		{
			document.getElementById(elm).style.backgroundColor='blue';
		}
		else
		{
			document.getElementById(elm).style.backgroundColor='';
		}
	}

	function CheckAll()
	{
		with (document.delmailform)
		{
			var cnt = 1;
			for (var i=0; i < elements.length; i++)
			{
				if (elements[i].type == 'checkbox' && elements[i].name == 'del')
				elements[i].checked = !elements[i].checked;
				var elm;
				if(elm = document.getElementById('td'+ cnt))
				{
					elm.style.backgroundColor= elm.style.backgroundColor == 'blue' ? 'white' : 'blue';
				}
				cnt=cnt+1
			}
		}
	}

</script>

</head>
<body>

	<form name="delmailform">
	<table>
	<tr>
	<td id="td1"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td1',this)"></td>
	</tr>
	<tr>
	<td id="td2"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td2',this)"></td>
	</tr>
	<tr>
	<td id="td3"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td3',this)"></td>
	</tr>
	<tr>
	<td id="td4"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td4',this)"></td>
	</tr>
	</table>
	<a href="java&#115;cript:void(CheckAll());">Markera alla</a>
	</form>

</body>
</html>
```

 :)

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

## #18 — Bosse168, 2004-11-26T09:18Z

Raderna fortsätter att vara blåa fast man avmarkerar dom med "CheckAll". :(
Dom återgår till startfärgen när man bockar ur dom en efter en.

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

## #19 — Peter S, 2004-11-26T10:00Z

```
<script type="text/javascript">

var form, elms, eLen;

window.onload = function(){
    form = document.forms["delmailform"],
    elms = form.elements,
    eLen = elms.length;

    for (var i = 0, elm; (elm = elms[i]); ++i)
	if (elm.name == "del")
	    elm.onclick = function(){
		this.parentNode.style.backgroundColor = this.parentNode.style.backgroundColor == "white" ? "blue" : "white";
	    }
}

function CheckAll(){
    var ch = false;

    for (var i = 0; i < eLen; ++i)
	if (!elms[i].checked) {
	    ch = true;
	    break;
	}

    var colors = ["white", "blue"];

    for (var i = 0, elm; (elm = elms[i]); ++i){
	elm.checked = ch;
	elm.parentNode.style.backgroundColor = colors[ch * 1];
    }
}

</script>
<html>
<body>
	<form name="delmailform">
	<table>
	<tr>
	<td id="td1"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td1',this)"></td>
	</tr>
	<tr>
	<td id="td2"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td2',this)"></td>
	</tr>
	<tr>
	<td id="td3"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td3',this)"></td>
	</tr>
	<tr>
	<td id="td4"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td4',this)"></td>
	</tr>
	</table>
	<a href="java&#115;cript:void(CheckAll());">Markera alla</a>
	</form>
</body>
</html>
```

 :)

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

## #20 — Bosse168, 2004-11-26T10:07Z

Med den koden så kan jag bara markera alla.

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/114427-ändra-färg-på-rad  
Nästa sida: https://www.webforum.nu/amne/javascript/114427-ändra-färg-på-rad/page2.md
