Help with a simple script

[yfjpe]

Hi,

I need help with something that I am trying to accomplish. I have a table with a bunch of cells, and basically, what I want is for the background to change colors when a cell is clicked. However, that part is easy. The hard part for me is that I need to know how to revert the backgrond color of all "active" cells when a different cell is clicked. Example:

Table has three cells:
Cell A - Default bgcolor = white
Cell B - Default bgcolor = white
Cell C - Default bgcolor = white

User clicks cell B, background becomes blue:

Cell A - Default bgcolor = white
(clicked) Cell B - Default bgcolor = blue
Cell C - Default bgcolor = white

Now user clicks cell A: its background becomes blue, but Cell B is reverted to white.

(clicked) Cell A - Default bgcolor = blue
Cell B - Default bgcolor = white
Cell C - Default bgcolor = white

Any help would be greatly appreciated.

Thanks,
Jeff

[jscheuer1]

The best method for 'reverting' depends upon what method you are using to change the cell's background to begin with. I would probably use something like:

<td onclick="toggleCells(this);">

The toggleCells() function would be in a script, probably in the head, and be like this:

function toggleCells(el){
rCells=document.getElementsByTagName('td');
for (i = 0; i < rCells.length; i++)
if (rCells[i].style.backgroundColor=='blue')
rCells[i].style.backgroundColor='white'
el.style.backgroundColor='blue'
}

Unless this conflicted with other cells on the same page, it would be fine. If it did conflict, class names could be employed to fine tune it.

[yfjpe]

Thanks a bunch!!! That is a great solution. I just have one additional question. IN this table, one of the cells with start with background "blue". Therefore, how can I make this cell start as blue but change when another cell is clicked?

Again, thanks so much for the previous solution.

[mwinter]

rCells=document.getElementsByTagName('td');
for (i = 0; i < rCells.length; i++)
if (rCells[i].style.backgroundColor=='blue')
rCells[i].style.backgroundColor='white'

Rather than looping through all cells, which could include completely irrelevant ones, it seems far more sensible to just remember what was previously highlighted.

The first code block below is a simple example that will work for only one 'group' of elements. The second is a constructor that will create an object that can be used for highlighting. Though each object is only useful for one group like the first example, you can create multiple objects.

var highlight = (function(h, b) {
  var active = null,
      getRef = document.getElementById
             ? function(i) {return document.getElementById(i);}
             : function() {return null;};

  return function(o) {
    var s;
    if('string' == typeof o) {o = getRef(o);}
    if(active) {active.style.backgroundColor = b;}
    if(o && (s = o.style)) {
      active = o;
      s.backgroundColor = h;
    }
  };
})('blue', 'white');

highlight(...);

Notice that right at the end appears a function call. The first argument should be the highlight colour, and the second is the normal background colour.

var Highlighter = (function() {
  var getRef = document.getElementById
             ? function(i) {return document.getElementById(i);}
             : function() {return null;};

  return function(b, h) {
    var active = null;

    this.highlight = function(o) {
      var s;
      if('string' == typeof o) {o = getRef(o);}
      if(active) {active.style.backgroundColor = b;}
      if(o && (s = o.style)) {
        active = o;
        s.backgroundColor = h;
      }
    };
  };
})();

var o = new Highlighter('blue', 'white');

o.highlight(...);

The argument to both highlight functions is either a string that contains the id attribute value of the element to highlight, or an object reference. An example of the latter is:

<td onclick="highlight(this);">

which will highlight that cell.

IN this table, one of the cells with start with background "blue". Therefore, how can I make this cell start as blue but change when another cell is clicked?

You can either add an id attribute to the cell, and include

#id {
  background-color: colour;
}

in your style sheet. Alternatively, add a style attribute to the cell:

<td style="background-color: colour;">

I prefer the former, keeping presentation separate from content.

Mike

[jscheuer1]

Mike is probably right but, to answer your question directly, just set that one cell's color in its style. Easiest way is inline:

<td style="background-color:blue"></td>

That way it will start out blue, if clicked it will remain blue, if any other cell is clicked, it will turn white.

[mwinter]

Mike is probably right [...]

Not quite, unfortunately. Whilst my suggestion will highlight a cell, it won't interact properly with my script suggestion. If the OP did use my code, the easiest solution would be to call the highlighter as the page loads, and have it highlight the cell and initialise itself, simultaneously.

Add an id attribute to the cell, then call the highlight function with that string value as the argument, either in response to the load event, or in a script element located somewhere after the cell in question.

Mike

[yfjpe]

I just want to thank you all for your fantastic solutions! I will go ahead and fiddle with both of them over the next couple of days. Both will come in handy somewhere down the line. Thanks again!

[sleipner]

I have been searching dd for about a week now and found this

I applied jscheuer1's script and changed it to onmouseover, but the color does not change back when the mouse leaves the specified cells (it works switching between them but not when it leaves them all together)

how would it have to be modified to use onmouseout? thx, code is ::::::::

<script type="text/javascript">
/* script posted on dynamicdrive.com in "general coding > javascript"
*section of forums in thread "Help with a simple script" dealing with
*changing background color of specified table cells by clicking on them*/
function toggleCells(el){
rCells=document.getElementsByTagName('td');
for (i = 0; i < rCells.length; i++)
if (rCells[i].style.backgroundColor=='red')
rCells[i].style.backgroundColor='#E5F1FF'
el.style.backgroundColor='red'
}
</script>

<td valign="top" align="center" width="19%" bgcolor="#E5F1FF" onmouseover="toggleCells(this);">
<font face="Verdana" size="4">
<a href="http://www.dynamicdrive.com/" onmouseover="showit(1)" onmouseout="showit(0">Dynamic Drive</a></font></td>

[brianvu]

Hi there, I use the code for highlight the cell on click, it works fine as long as I stay on that page. But when I use it on a template (I want a navigation bar on every web page, when user clicks on a navigation link, that particular cell will be highlighted so that I create a template for navigation), it doesn't work. Can anyone help me with this issue? Thanks.

Brian