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

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>

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å. :)

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;
  }
}

:)

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.

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;
      }
    }
  }
}

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

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

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) + ")";
}

Hjälpte inte fortfarande samma problem

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

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>