---
title: "Alla kolumner ska färgläggas"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/97495-alla-kolumner-ska-färgläggas"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "ampy"
published: "2004-02-16T15:07:24.000Z"
updated: "2004-03-01T20:09:06.000Z"
replies: 11
views: 273
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/97495-alla-kolumner-ska-färgläggas"
---

# Alla kolumner ska färgläggas

## #1 — ampy, 2004-02-16T15:07Z

Hittade denna lilla kodsnutt i en tråd men den fungerar inte riktigt så som jag vill ha det. 

```
<html>
<head>

	<script type="text/javascript">
	<!--
		function colorize(tbl,color){
			if(document.getElementById('f'+tbl).checked){
				document.getElementById(tbl).style.backgroundColor=color;
			} else {
				document.getElementById(tbl).style.backgroundColor='';
			}
		}
	//-->
	</script>

</head>
<body>

	<table width="100px">
	<tr>
		<td id="b1"><input id="fb1" type="checkbox" onclick="colorize('b1','#CC0000');"></td> <td width="50px" id="b1"></td>
	</tr>
	</table>

</body>
</html>
```

När man makerar 'checkboxen' så färgläggs bara den första kolumnen (den vänstra) och den högra förblir vit.

Hur ska man göra så att båda kolumnerna färgläggs (kan vara fler än två kolumner)?

Kom på en lösning genom att lägga id="b1" i tr-taggen men den lösningen vill jag inte använda mig av.

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

## #2 — dectgap, 2004-02-16T15:21Z

Du kan inte ha samma id på två element. Ett id måste vara unikt.

Att flytta ut id="b1" på \<tr\>-taggen funkar däremot bra - varför vill du inte använda dig av det?

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

## #3 — ampy, 2004-02-16T16:48Z

Har modifierat koden lite:

```
html>
<head>

	<script type="text/javascript">
	<!--
		function colorize(tbl,color){
			if(document.getElementById('f'+tbl).checked){
				document.getElementById(tbl).style.backgroundColor=color;
			} else {
				document.getElementById(tbl).style.backgroundColor='';
			}
		}
	//-->
	</script>

</head>
<body>

	<table width="100px" cellspacing="0px" cellpadding="0px">
	<tr id="b1">
		<td bgcolor="#00ff00"><input id="fb1" type="checkbox" onclick="colorize('b1','#CC0000');"></td> <td bgcolor="#00ff00" width="50px"></td>
	</tr>
	</table>

</body>
</html>
```

Har flyttat ut id="b1" till tr-taggen samt satt dit bakgrundsfärg i cellerna. Nu när man markerar 'checkboxen' så ändras inte färgen.

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

## #4 — dectgap, 2004-02-16T17:31Z

Det beror på att du har angett en bakgrundsfärg i \<td\>-taggarna, som går före bakgrundsfärgen i \<tr\>-taggen.

Testa:

```
<html>
<head>

	<script type="text/javascript">
	<!--
		function colorize(tbl,color){
			if(document.getElementById('f'+tbl).checked){
				document.getElementById(tbl).style.backgroundColor=color;
			} else {
				document.getElementById(tbl).style.backgroundColor='#00ff00';
			}
		}
	//-->
	</script>

</head>
<body>

	<table width="100px" cellspacing="0px" cellpadding="0px">
	<tr id="b1" style="background-color: #00ff00">
		<td><input id="fb1" type="checkbox" onclick="colorize('b1','#CC0000');"></td> <td width="50px"></td>
	</tr>
	</table>

</body>
</html>
```

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

## #5 — ampy, 2004-02-16T18:21Z

Kanske ska nämnas att jag har två färger på kolumnerna som återkommer varannan gång. Hur ska man lösa detta då?

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

## #6 — ampy, 2004-02-20T11:32Z

Ingen?

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

## #7 — ampy, 2004-02-28T18:53Z

Fortfarande ingen?  :q

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

## #8 — Okkido, 2004-02-28T18:56Z

Jag tänkte svara, men eftersom du bumpar dina trådar skippar jag det, ha en trevlig helg.

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

## #9 — dectgap, 2004-02-29T16:26Z

Visa hur din kod ser ut nu så blir det lättare.

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

## #10 — ampy, 2004-03-01T13:14Z

```
<html> 
<head> 

    <script type="text/javascript"> 
    <!-- 
        function colorize(tbl,color){ 
            if(document.getElementById('f'+tbl).checked){ 
                document.getElementById(tbl).style.backgroundColor=color; 
            } else { 
                document.getElementById(tbl).style.backgroundColor='#00ff00'; 
            } 
        } 
    //--> 
    </script> 

</head> 
<body> 

    <table width="100px" cellspacing="0px" cellpadding="0px"> 
    <tr id="b1"> 
        <td style="background-color: #00ff00;"><input id="fb1" type="checkbox" onclick="colorize('b1','#CC0000');"></td> 
        <td style="background-color: #0000ff;" width="50px"></td> 
    </tr> 
    </table> 

</body> 
</html>
```

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

## #11 — dectgap, 2004-03-01T13:31Z

```
<html> 
<head> 

    <script type="text/javascript"> 
    <!-- 
        function colorize(isChecked, objRow){ 
            if(isChecked){ 
                objRow.className = "selected"; 
            } else { 
                objRow.className = ""; 
            } 
        } 
    //--> 
    </script> 

    <style type="text/css">
    .kol1 {
        background-color: #00ff00;
    }
    
    .kol2 {
        background-color: #0000ff;
    }
    
    .selected td {
        background-color: #cc0000;
    }
    </style>
</head> 
<body> 

    <table width="100" cellspacing="0" cellpadding="0"> 
    <tr> 
        <td class="kol1"><input type="checkbox" onclick="colorize(this.checked, this.parentNode.parentNode);"></td> 
        <td class="kol2" width="50"></td> 
    </tr> 
    </table> 

</body> 
</html>
```

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

## #12 — ampy, 2004-03-01T20:09Z

Tack dectgap!

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/97495-alla-kolumner-ska-färgläggas
