---
title: "Ändra bakgrundsfärg i en tabellcell"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/16798-ändra-bakgrundsfärg-i-en-tabellcell"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Kim"
published: "2000-03-08T17:24:00.000Z"
updated: "2000-03-14T07:20:00.000Z"
replies: 13
views: 443
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/16798-ändra-bakgrundsfärg-i-en-tabellcell"
---

# Ändra bakgrundsfärg i en tabellcell

## #1 — Kim, 2000-03-08T17:24Z

Hur gör jag för att ändra bakgrundsfärgen i en tabellcell när jag för musen över den?

T.ex. Jag har en cell som ser ut så här.

```
<td bgcolor="#ff0000" onMouseOver="nyFarg(namn)" name="cellnamn">Text</td>
```

Jag skrev då ett script för att ändra bakgrundsfärgen när man för musen över den:

```
<script language="JavaScript">

function bytFarg(namn)
{
 if (document.tabellnamn.cellnamn.bgColor == '#4d729a')
  {
   document.tabellnamn.cellnamn.bgColor = '#294a71';
  }

 else
  {
   document.tabellnamn.cellnamn.bgColor = '#4d729a';
  }
}
</script>
```

IE verkar dock inte vilja förstå detta. Någon som vet hur det ska vara?

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

## #2 — M@rtin, 2000-03-08T18:31Z

Vet inte säkert men i ie brukar man skriva document.all.tabellnamn.cellnamn.bgColor

du ska alltså sätta dit all

//M@rtin

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

## #3 — Kim, 2000-03-08T19:05Z

Testade lite snabbt. Det fungerade tyvärr inte. :(

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

## #4 — Kim, 2000-03-08T20:51Z

Nu har jag ändrat mig. Jag vill ändra bakgrunden med hjälp av css istället. Därför definierar jag bakgrundsfärgen i \<td\>-taggen med style="background-color: #ff0000;".
Sen anropar jag javascriptet med när man för muspekaren över cellen.
Däremot får jag ingen ordning på något script som fungerar.
Skulle någon vänlig själ kunna tänka sig att skriva ett bra script åt mig som fungerar? Snälla... :r

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

## #5 — Ricke, 2000-03-09T08:40Z

Jag har provat lite med det där och det verkar som att ett stylesheet alltid väger tyngre än dhtml... Har man (för en TD) satt en background-color i ett stylesheet så verkar man inte få ändra på den via script.
Om man skippar CSS'en så ändrar man bakgrunds-cell-färgen med:

```
*snip*

function change()
{
  document.all.cellen.bgColor = "#00FF00";
}

*snip*

<td id="cellen" onMouseOver="change();">Hejsan!</td>

*snip*
```

Kommer någon på ett sätt att gå runt problemet med CSS är även jag intresserad...

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

## #6 — RGB, 2000-03-09T12:57Z

**funkar bara i Explorer**
\<html\>
...
\<head\>
...
\<script language="javascript"\>
function BgColor(aktiv,farg){
if((document.all)){
if((aktiv==true)){event.srcElement.style.backgroundColor=farg}
else {
	event.srcElement.style.backgroundColor=''
}
}
}
\</script\>
\</head\>
\<body bgcolor="#FFFFFF"\>
...
\<table border="0" cellspacing="0" cellpadding="0" height="80"\>
  \<tr\>
    \<td onmouseover="BgColor(true,'red')" 
	    onmouseout="BgColor(false,'')" width="80"\>&nbsp;\</td\>
  \</tr\>
  \</table\>
...
\</body\>
\</html\>

//R.G.B

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

## #7 — Kim, 2000-03-09T17:52Z

Tack så jättemycket RGB! :D

Jag har försökt få ordning på det här ett tag nu. Nu fungerar det äntligen!

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

## #8 — Kim, 2000-03-09T19:31Z

Problem igen RGB!

Om man har text i cellen (som jag vill ha) så blir bara textens bakgrund färgad (röd i det här fallet) när man för muspekaren över texten. När man alltså för muspekaren över texten försvinner färgen från resten av cellen. Då vill jag att den ska finnas kvar.
Hur gör jag? Jo, jag vet att jag är besvärlig... :r

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

## #9 — RGB, 2000-03-09T20:32Z

**Kim:**
Utgår från att det var en länk i cellen som ställde till det.

**Lägg det här i cellen:**

\<a href="http://main" onmouseover="srcElementAncestor('red')"\>Main\</a\>

**Och det här lägger du till i scriptet:**

function srcElementAncestor(parentBgColor) {
if((document.getElementById)&&(document.all)) { //Kolla DOM stödet 
if(event.srcElement.parentElement.tagName=='TD') {
event.srcElement.parentElement.style.backgroundColor=parentBgColor
  }
 }
}

//R.G.B

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

## #10 — Kim, 2000-03-09T20:41Z

Tyvärr fungerade inte det heller... :(
Det hjälper inte. Bakgrundsfärgen går fortfarande tillbaka när man för pekaren över texten.

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

## #11 — RGB, 2000-03-10T15:55Z

Funkade fin för mig.
Vill du visa koden så ska jag se vad som krånglar och om man kan göra något åt det.

//R.G.B

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

## #12 — Kim, 2000-03-11T01:04Z

Tack så mycket RGB. Här kommer koden.

```
<script language="javascript">

function BgColor(aktiv,farg)
{

 if((document.all))
  {
   if((aktiv == true))
    {
     event.srcElement.style.backgroundColor = farg;
    }
   else 
    {
     event.srcElement.style.backgroundColor = '';
    }
  }
}

function srcElementAncestor(parentBgColor) 
{

 if((document.getElementById)&&(document.all)) 
  { 
   //Kolla DOM stödet 

   if(event.srcElement.parentElement.tagName == 'td')
    {
     event.srcElement.parentElement.style.backgroundColor = parentBgColor;
    }
  }
}

</script>

<table border="0" cellpadding="2" id="meny" name="meny" cellspacing="0" width="130" 
style="border-color : Black;
border-bottom-color : Black;
border-bottom-style : dotted;
border-bottom-width : 1px;

border-top-color : Black;
border-top-style : dotted;
border-top-width : 1px;

border-right-color : Black;
border-right-style : dotted;
border-right-width : 1px;

border-left-color : Black;
border-left-style : double;
border-left-width : 1px;" 
>

<tr>
<td valign="top" align="right" style="background-color: #4d729a; border-bottom-color : Black; border-bottom-width : 1px; border-bottom-style : double;" 
onMouseOver="BgColor(true,'#294a71')" onMouseOut="BgColor(false,'')">
<span><b>

<a href="guestbok/index.php3" style="text-decoration:none;" onMouseOver="srcElementAncestor('#294a71')">Gästbok</a>

</td>
</tr>
```

Hoppas det räcker så... :)
\*tacksam för all hjälp\*

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

## #13 — RGB, 2000-03-14T07:06Z

**Det här är vad man vanligtvis brukar kalla "snabbfix" mao så kommer den att krångla om du mixtrar med innehållet i cellen:**

\<html\>
\<script language="javascript"\>

function BgColor(aktiv,farg)
{
if((document.all))
{
if((aktiv == true))
{
event.srcElement.style.backgroundColor = farg;
}
else 
{
event.srcElement.style.backgroundColor = '';
}
}
}

function srcElementAncestor(parentBgColor) 
{
if((document.getElementById)&&(document.all)) 
{ 
if(event.srcElement.parentElement.parentElement.tagName == 'TD')
{
event.srcElement.parentElement.parentElement.style.backgroundColor=parentBgColor;
}
}
}

\</script\>

\<table border="0" cellpadding="2" id="meny" name="meny" cellspacing="0" width="130" 
style="border-color : Black; border-bottom-color : Black; border-bottom-style : dotted;
border-bottom-width : 1px; border-top-color : Black; border-top-style : dotted;
border-top-width : 1px; border-right-color : Black; border-right-style : dotted;
border-right-width : 1px; border-left-color : Black; border-left-style : double;
border-left-width : 1px;" 
\>

\<tr\>
\<td valign="top" align="right" style="background-color: #4d729a; border-bottom-color : Black; border-bottom-width : 1px; border-bottom-style : double;" 
onMouseOver="BgColor(true,'#294a71')" onMouseOut="BgColor(false,'')"\>
\<b\>\<a href="guestbok/index.php3" style="text-decoration:none;" onMouseOver="srcElementAncestor('#294a71')"\>
Gästbok\</a\>\</b\>

\</td\>
\</tr\>
\</table\>
\</html\>

//R.G.B

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

## #14 — Kim, 2000-03-14T07:20Z

Tack så mycket RGB! :D

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/16798-ändra-bakgrundsfärg-i-en-tabellcell
