---
title: "Byta Style p[ en <TD>"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/47627-byta-style-p-en-td"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Jaar"
published: "2002-07-10T12:42:21.000Z"
updated: "2002-07-11T22:21:38.000Z"
replies: 9
views: 330
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/47627-byta-style-p-en-td"
---

# Byta Style p[ en <TD>

## #1 — Jaar, 2002-07-10T12:42Z

Jag har en table och vill skapa en OnMouseOver funktion på hela raden som endast byter bakgrundsfärgen på en av kolumnerna. 

Nu har jag följande : 

```
<TR OnMouseOver="this.style.backgroundColor='#CCCCCC'" OnMouseOut="this.style.backgroundColor='#FFFFFF'">

<TD CLASS="namn">Namn</TD>
<TD>Info</TD>
</TR>
```

Det jag skulle vilja åstakomma är att byta style.backgroundColor på Namn kolumnen endast. Går det?

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

## #2 — Jojoxx, 2002-07-10T13:11Z

Exempel;

```
<style type="text/css">
.cola { background-color:white; }
.colb { background-color:white; }
</style>
<script language="JavaScript" type="text/javascript">
function getStyleClassByName(className){
	if(document.all){
		for(var styleSheet=0;styleSheet<document.styleSheets.length;styleSheet++){
			for(var rule=0;rule<document.styleSheets[styleSheet].rules.length;rule++){
				if(document.styleSheets[styleSheet].rules[rule].selectorText=="."+className){ return document.styleSheets[styleSheet].rules[rule]; }
			}
		}
	} else if(document.getElementById){
		for(var styleSheet=0;styleSheet<document.styleSheets.length;styleSheet++){
			for(var rule=0;rule<document.styleSheets[styleSheet].cssRules.length;rule++){
				if(document.styleSheets[styleSheet].cssRules[rule].selectorText=="."+className){ return document.styleSheets[styleSheet].cssRules[rule]; }
			}
		}
	}
}	
</script>
<table border="1">
	<tr>
		<td class="cola"
			onMouseover="getStyleClassByName('cola').style.backgroundColor='blue';"
			onMouseout="getStyleClassByName('cola').style.backgroundColor='white';">
			Kolumn A
		</td>
		<td class="colb"
			onMouseover="getStyleClassByName('colb').style.backgroundColor='blue';"
			onMouseout="getStyleClassByName('colb').style.backgroundColor='white';">
			Kolumn B
		</td>
	</tr>
	<tr><td class="cola">Foo</td><td class="colb">Foo</td></tr>
	<tr><td class="cola">Foo</td><td class="colb">Foo</td></tr>
</table>
```

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

## #3 — Jaar, 2002-07-10T13:19Z

Fast man flyttar onMouseOver till sin \<TR\> då eller? annars reagerar den väl inte på hela raden?

Jag vill alltså att ett fält byter färg men att den reagerar på hela raden. Får ta o testa ditt exempel men o mixtra lite ...

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

## #4 — Jojoxx, 2002-07-10T16:59Z

Du skrev "kolumn". Det brukar man benämna en vertikal "rad" av celler. En \<tr\> (table row) är en horisontell rad...

```
<table border="1">
<tr onMouseover="this.style.backgroundColor='blue';" onMouseout="this.style.backgroundColor='white';"><td>a</td><td>b</td></tr>
<tr onMouseover="this.style.backgroundColor='blue';" onMouseout="this.style.backgroundColor='white';"><td>c</td><td>d</td></tr>
</table>
```

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

## #5 — Jaar, 2002-07-11T06:54Z

Ajajaj, nu läser du fel igen... 
Citat från mig själv: 
"Jag har en table och vill skapa en OnMouseOver funktion på hela raden som endast byter bakgrundsfärgen på en av kolumnerna"

Jag vill ha OnMouseOver på TRen men byta färgen på en specifik TD :)

P.S. Har inte hunnit testa ditt första ännu...

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

## #6 — Jojoxx, 2002-07-11T08:50Z

Hade du sagt en av cellerna istället för en av kolumnerna hade jag varit med på första frågen ;)

```
<table border="1">
<tr onMouseover="document.getElementById('thisone').style.backgroundColor='blue';" onMouseout="document.getElementById('thisone').style.backgroundColor='white';"><td id="thisone">Foo</td><td>Bar</td></tr>
<tr><td>Foo</td><td>Bar</td></tr>
</table>
```

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

## #7 — Jaar, 2002-07-11T14:05Z

Hehe, ok... 

Nu funkar det iaf, men ett litet problem!

Cellen "flimmrar" när man drar längs raden, varför då?
Varje flimmer uppstår då man byter **CELL**   :e 

Detta är en rad i tabellen

```
<TR OnMouseOver="document.getElementById('6').style.backgroundColor='blue'" OnMouseOut="document.getElementById('6').style.backgroundColor='white'">
<TD ID="6" CLASS="namn">Anders&nbsp;&nbsp;</TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
<TD WIDTH="20" BGCOLOR="#FFFFFF"><img src="img/spacer.gif" border="0" width="20" height="10"></TD>
<TD WIDTH="1" BGCOLOR="#CCCCCC"><IMG SRC="img/spacer.gif" border="0" width="1" height="1"></TD>
</TR>
```

Lite rörigt, det är en autogenererad kalender grej...

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

## #8 — Jojoxx, 2002-07-11T14:31Z

Får nog kalla det webbläsarbugg. Mellanrummet som är mellan cellerna anses inte tillhöra varken rad eller cell. Använder du inte border på tabellen borde du dock kunna sätta cellspacing till 0 och öka cellpaddingen istället.

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

## #9 — Jaar, 2002-07-11T14:43Z

Har border="0" cellpadding="0" cellspacing="0"

```
(jsp)    out.println("<TABLE BORDER=\"0\" CELLPADDING=\"0\" CELLSPACING=\"0\">");
```

Asså, det kanske är nåt koko med IE, men i NS funkar inte OnMouseOver på TR:en alls (NS 4.xx)
Alla dessa buggar asså :e

Jag funderade på ifall det kunde ha med att de andra td hade bgcolor o det störde (när jag bytte bakgrund på hela tr:en asså) men det verkar itne ha ett dyft med saken o göra

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

## #10 — Jojoxx, 2002-07-11T22:21Z

Nej, Netscape 4.x stödjer inte objektmodellen DOM enligt w3c heller så var det bra med den saken. Det är mycket som Netscape 4 inte stödjer (eller som inte fanns på den tiden kanske vi ska säga. Kan inte begära så mycket).

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/47627-byta-style-p-en-td
