Bgcolor of the cell changes on click and back

**KreCi** · 07-29-2007, 08:22 AM

Hello, I have been looking around internet and on the forum but could not found script that do exactly something like this:

When I click on any cell on the table it changes color and it will be able to change many cells to new color. When I click again on the cell it changes back to its orginal color. And I would like it to check what color was before as there are already a few colors used in the cells.
It would be best if it change CSS style.

All scripts I have found in internet can change only color of one cell and when I click another the first one changes to its orginal color - and it shouldn't. Please help me! I reallly need it and I am not able to write it by myself...

**KreCi** · 07-29-2007, 01:18 PM

I have done it other way so nevermind...

**Amazinzay** · 07-29-2007, 01:43 PM

This is a fairly simple script. Just put this in the head section of your page:

Change the yellow and blue with the colors of your choice.
Finally put this in the <td> tag of each table cell you want to change:

style = "background-color: blue" onMouseOver="changeColor(this)"

hope this helps.

**jscheuer1** · 07-29-2007, 03:42 PM

Originally Posted by Amazinzay

This is a fairly simple script. Just put this in the head section of your page:

Code:

<script type="text/javascript" language=javascript>
function changeColor(cell)
{
var color = cell.style.backgroundColor;
if (color == "blue")
{
cell.style.backgroundColor = "yellow";
}
else if (color == "yellow")
{
cell.style.backgroundColor = "blue";
}
}
</script>

Change the yellow and blue with the colors of your choice.
Finally put this in the <td> tag of each table cell you want to change:

Code:

style = "background-color: blue" onMouseOver="changeColor(this)"

hope this helps.

That won't work in some browsers because, even if you specify a color as hex, or its name, or by its RGB value, different browsers will store the value as they see fit. As a result, when you go to check what the color currently is, it often will not be 'yellow' or 'blue' or whatever you expected it to be.

Notes: The language attribute has been deprecated, stop using it. You should formally declare all variables.

**Twey** · 07-29-2007, 04:51 PM

You can adapt this script of mine:

Code:

  <script type="text/javascript">
    onload = function() {
      for(var i = 0, es = document.getElementsByTagName('td'), n = es.length, e = es[0]; i < n; e = es[++i]) {
        var m = e.className.match(/swap\((\w+),\s*(#?[\d\-]+)\)/);
        if(m)
          e['on' + m[1]] = (function(n) {
            return function() {
              var s = this.style;
              var oldclr = s.backgroundColor;
              s.backgroundColor = n;
              n = oldclr;
            };
          })(m[2]);
      }
      e = es = null;
    };
  </script>
</head>

Code:

<td class="swap(click, yellow)" style="background-color: red;">

It should work with #rgb, #rrggbb, and named colour notations, but not the rgb(rrr, ggg, bbb) notation.

**jscheuer1** · 07-29-2007, 08:57 PM

I don't think that will work, Twey. At least this doesn't (no error message, just didn't work):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script type="text/javascript">
    onload = function() {
      for(var i = 0, es = document.getElementsByTagName('span'), n = es.length, e = es[0]; i < n; e = es[++i]) {
        var m = e.className.match(/swap\((\w+),\s*(#?[\d\-]+)\)/);
        if(m)
          e['on' + m[1]] = (function(n) {
            return function() {
              var s = this.style;
              var oldclr = s.backgroundColor;
              s.backgroundColor = n;
              n = oldclr;
            };
          })(m[2]);
      }
      e = es = null;
    };
  </script>
</head>
<body>
<span class="swap(click, yellow)" style="background-color: red;">Hey</span>
</body>
</html>

I did change 'td' to 'span' in the script, so that shouldn't have made any difference though, I may have missed something.

This works out well and should support any method of naming and/or setting the color that any modern browser supports:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
span {
background-color:lightblue;
}
</style>
<script type="text/javascript">
function changeColor(el, clr){
var id, f=changeColor, c='color', r='run';
if(!el.id||!f[el.id+r]){
id=f.ids[f.ids.length]=el.id=el.id? el.id : c+'$_'+r+f.ids.length;
f[id+c]=el.style.backgroundColor;
f[id+r]=1;
}
else{id=el.id;};
el.style.backgroundColor=f[id+c]==el.style.backgroundColor? clr : f[id+c];
}
changeColor.ids=[];
</script>
</head>
<body>
<span onclick="changeColor(this, 'yellow')">Hey</span>
</body>
</html>

**Twey** · 07-29-2007, 10:01 PM

Really? The original worked, I must've mucked something up while adapting it. Oh well, John's will work OK, although it is rather ugly.

**jscheuer1** · 07-30-2007, 03:24 AM

Well, beauty is in the eye of the beholder. Working does count for something though. Anyways, I like this version even better:

Code:

<script type="text/javascript">

function chngBGclr(el, bgclr){
var d=el.id, f=chngBGclr, c='backgroundColor', e=el.style;
if(!f.ids){f.ids=1;};
if(typeof f[d+c]=='undefined'){
d=el.id=d? d : c+'$_'+[f.ids++];
f[d+c]=e[c];
}
e[c]=f[d+c]==e[c]? bgclr : f[d+c];
}

</script>

HTML Code:

<td onclick="chngBGclr(this, 'yellow')">Hey</td>

**Twey** · 07-30-2007, 05:02 AM

I don't like this ids thing. It shouldn't be necessary to keep track of IDs, and it's inefficient besides to keep looking things up with gEBI(). A closure is much neater even if we do want to keep using an inline onclick event rather than a class.

I'd fix my code, but I'm too worn out today, I fear I'd break it even further.

**jscheuer1** · 07-30-2007, 05:17 AM

There isn't a single getElementById, or ByTagName (for that matter) in my code. Once the id is ascertained or assigned, it becomes a prefix for a property of the function for each element. This is only used to store the the original backgroundColor setting for retrieval/comparison purposes. On subsequent runs, all that is done is to compare the original stored value with the current value, if equal, the value passed to the function is used to set the backgroundColor. If not, the stored value is used to set the backgroundColor.

Added Later: The function did however have may more get id by element lookups than it needed. I've fixed that, and edited my previous post to reflect the changes.

Thread: Bgcolor of the cell changes on click and back

Thread Tools

Search Thread

Bgcolor of the cell changes on click and back

Bookmarks

Bookmarks

Posting Permissions