---
title: "Ändra tillbaka färgen på <td> ock t-bax?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/141178-ändra-tillbaka-färgen-på-td-ock-t-bax"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "pRob3"
published: "2006-01-19T23:19:43.000Z"
updated: "2006-01-20T12:39:52.000Z"
replies: 10
views: 468
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/141178-ändra-tillbaka-färgen-på-td-ock-t-bax"
---

# Ändra tillbaka färgen på <td> ock t-bax?

## #1 — pRob3, 2006-01-19T23:19Z

Hejsan hejsan. :)
Det är så att jag undrar om det finns någon vänlig kod-knackare som kan hjälpa mig med mitt gigantiska problem. ;)
Det är så att jag vill ändra bakgrundsfärgen på en \<td\> vid klick på en länk och vid ett klick på en annan länk i samma tabell så ska färgen ändras tillbaka till den oklickade färgen.

```
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<a href="#" onclick="this.style.backgroundColor='blue'; return false">Länk 1</a>
	</td>
    <td>
<a href="#" onclick="this.style.backgroundColor='blue'; return false">Länk 2</a>
	</td>
    <td>
<a href="#" onclick="this.style.backgroundColor='blue'; return false">Länk 3</a>
	</td>
  </tr>
</table>
```

Ungefär så menar jag fast här stannar ju färgerna kvar vid klick på annan länk och det är inte bakgrundsfärgen i td som ändras utan bara texten.
Måste väl gå på något smidigt (för er) sätt att lösa detta gigantiska problem för mig i JavaScript? :)

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

## #2 — Peter S, 2006-01-20T10:41Z

Goddag!

```
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<a href="#" onclick="change_bg(this, 'blue', 'white'); return false">Länk 1</a>
	</td>
    <td>
<a href="#" onclick="change_bg(this, 'blue', 'white'); return false">Länk 2</a>
	</td>
    <td>
<a href="#" onclick="change_bg(this, 'blue', 'white'); return false">Länk 3</a>
	</td>
  </tr>
</table>

<script>
function change_bg(a,c1,c2){
  if (a.parentNode && a.parentNode.nodeName && document.getElementsByTagName){
    var elm = a.parentNode;
    while (elm.nodeName.toLowerCase() != "table"){
      elm = elm.parentNode;
    }
    var tds = elm.getElementsByTagName("td"),
        i   = 0;
        elm = 0;
    while (elm = tds.item(i++)){
      elm.style.backgroundColor = 
          elm.style.backgroundColor != c1 ? c1 : c2;
    }
  }
}
</script>
```

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

## #3 — pRob3, 2006-01-20T10:53Z

Goddagens på dig också :)
Tyvärr funkade inte koden riktigt som den skull då den ändrar hela raden till blå vid klick.
<http://slaf.se/test/td_color_change.asp>
Jag vill att bara \<td\> cellen som länken ligger i blir blå. :)

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

## #4 — Peter S, 2006-01-20T11:03Z

Ok, jag missuppfattade dig.

```
function change_bg(a,c1,c2){
  if (a.parentNode && a.parentNode.nodeName){
    var elm = a.parentNode;
    while (elm.nodeName.toLowerCase() != "td"){
      elm = elm.parentNode;
    }
    elm.style.backgroundColor = 
        elm.style.backgroundColor != c1 ? c1 : c2;
  }
}
```

 :)

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

## #5 — pRob3, 2006-01-20T11:12Z

haha då ska du bara vet hur många gånger jag missförstår mig själv. ;)
Nu blev det mycket bättre, fast för att krångla till det ytterligare jag vill att den blåa bakgrunden ska försvinna från tidigare klickade länkar vid klick på en annan länk. Nu måste man klicka på den så den blir vit igen.

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

## #6 — Peter S, 2006-01-20T11:23Z

Då testar vi igen  ;) 

```
function change_bg(a,c1,c2){
  if (a.parentNode && a.parentNode.nodeName && document.getElementsByTagName){
    var tbl = a.parentNode,
        td  = 0;
    while (tbl.nodeName.toLowerCase() != "table"){
      if (!td && tbl.nodeName.toLowerCase() == "td"){ td = tbl }
      tbl = tbl.parentNode;
    }
    var tds = tbl.getElementsByTagName("td"),
        i   = 0,
        elm = 0;
    td.style.backgroundColor = 
        td.style.backgroundColor != c1 ? c1 : c2;
    while (elm = tds.item(i++)){
      if (elm != td && td.style.backgroundColor == c1){
	elm.style.backgroundColor = c2;
      }
    }
  }
}
```

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

## #7 — pRob3, 2006-01-20T11:34Z

Tack så mycket du har räddat min helg.
Helgens första bärs ska jag dricka till din ära.

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

## #8 — pRob3, 2006-01-20T12:06Z

Upptäcke att det blir fel när jag ändrar blue till D8D0BC.

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

## #9 — Peter S, 2006-01-20T12:23Z

Tydligen ändrar FF dessa hexadecimala strängar till rgb(m,n,p)-ekvivalenter, och IE till gemener. Därför blir det fel i vissa if-satser.

Ändra till:

```
function change_bg(a,c1,c2){
  if (a.parentNode && a.parentNode.nodeName && document.getElementsByTagName){
    var tbl = a.parentNode,
        td  = 0;
    while (tbl.nodeName.toLowerCase() != "table"){
      if (!td && tbl.nodeName.toLowerCase() == "td"){ td = tbl }
      tbl = tbl.parentNode;
    }
    var tds = tbl.getElementsByTagName("td"),
        i   = 0,
        elm = 0,
        bg  = td.style;

    bg.backgroundColor = 
        (bg.backgroundColor != c1 && bg.backgroundColor != c1.rgb_eq()) ? c1 : c2;
    while (elm = tds.item(i++)){
      if (elm != td && (bg.backgroundColor == c1 || bg.backgroundColor == c1.rgb_eq())){
	elm.style.backgroundColor = c2;
      }
    }
  }
}

String.prototype.rgb_eq = function(){
  var elm = 0;
  if (!(elm = this.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i))){ return this }
  return "rgb(" + parseInt(elm[1],16) + ", " + parseInt(elm[2],16) + ", " + parseInt(elm[3],16) + ")";
}
```

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

## #10 — pRob3, 2006-01-20T12:34Z

Hjälpte inte fortfarande samma problem

<http://slaf.se/test/td_color_change.asp>

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

## #11 — Peter S, 2006-01-20T12:39Z

Ange färgvärdena med ett '#' framför. Dessutom, skall inte \<td\>-elementens bakgrundsfärg initialt vara samma som du anger i funktionen (d.v.s. #a6a48d)?

Ett komplett exempel:

```
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<a href="#" onclick="change_bg(this, '#d8d0bc', '#A6A48D'); return false">Länk 1</a>
	</td>
    <td>
<a href="#" onclick="change_bg(this, '#d8d0bc', '#A6A48D'); return false">Länk 2</a>
	</td>
    <td>
<a href="#" onclick="change_bg(this, '#d8d0bc', '#A6A48D'); return false">Länk 3</a>
	</td>
  </tr>
</table>

<script>
function change_bg(a,c1,c2){
  c1 = c1.toLowerCase();
  c2 = c2.toLowerCase();

  if (a.parentNode && a.parentNode.nodeName && document.getElementsByTagName){
    var tbl = a.parentNode,
        td  = 0;
    while (tbl.nodeName.toLowerCase() != "table"){
      if (!td && tbl.nodeName.toLowerCase() == "td"){ td = tbl }
      tbl = tbl.parentNode;
    }
    var tds = tbl.getElementsByTagName("td"),
        i   = 0,
        elm = 0,
        bg  = td.style;
    bg.backgroundColor = 
        (bg.backgroundColor != c1 && bg.backgroundColor != c1.rgb_eq()) ? c1 : c2;

    while (elm = tds.item(i++)){
      if (elm != td && (bg.backgroundColor == c1 || bg.backgroundColor == c1.rgb_eq())){
	elm.style.backgroundColor = c2;
      }
    }
  }
}

String.prototype.rgb_eq = function(){
  var elm = 0;
  if (!(elm = this.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i))){ return this }
  return "rgb(" + parseInt(elm[1],16) + ", " + parseInt(elm[2],16) + ", " + parseInt(elm[3],16) + ")";
}

</script>

<style>
td{
 background-color: #A6A48D;
}
</style>
```

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/141178-ändra-tillbaka-färgen-på-td-ock-t-bax