Link to home
Start Free TrialLog in
Avatar of sandworm23
sandworm23

asked on

changing color of all elements within a table row

I've got a table with two columns and six rows, each column and each row is a different color (twelve unique classes alltogether.) These rows contain text fields to display dynamic data from a script, recalculated when a new baseline row is selected. The text fields have been colored and unbordered to appear invisible in the table. I'll be indicating the selected row by another method so I'm not too concerned with that right now. But what I need to do is highlight the rows onMouseOver to indicate that they are selectable.

It seems simple enough, just change the classNames of all the elements in the row whenever any of them is moused over. But with so many different objects to change, every single element winds up with a long string of script, which makes the page code sloppy and harder to maintain. I need to group the elements and apply my color change to the entire group.

I worked out one way to do it, by changing the background-color of the class (as opposed to changing the class of the object) but then I wound up with duplicate functions renamed for each row, and referring to the classes by their number in the array makes future modifications of the stylesheet a pain (document.styleSheets[0].rules[1].backgroundColor) and since each function has to change FOUR classes, there has to be a better way.

So now I'm back to trying to change the classNames of the elements. I want to combine it all into a single function, or at most one function for each row (six rows total) so all I have to do is call that function on each element and it'll change all the others. Additionally, onMouseOut needs to change them all back to what they were, so probably two functions are needed.

The objects to change will probably need to be grouped into an array, and the function will just apply the color change to the entire array, but I don't know how to go about doing that. Ideally I want it to go something like this:

onMouseOver="changeRow('row1')" onMouseOut="resetRow('row2')"

But that may be too simple to be realistic. This has been driving me nuts for three days and I'm starting to run out of ideas. One of my earlier versions is viewable at http://focalcurve.com/dev/testtable2.html (text fields are only in one row) to give you an idea of where I'm going.

I just signed up on EE so I don't have a lot of points to give, though I took the survey and scored an additional 200. If someone out there can solve my problem, I will gleefully hand over the full 275 points along with many truckloads of gratitute.
Avatar of smokediver
smokediver

sand, try this

<html>
<head>
<title>Test page</title>

<script language="JavaScript">
 
  function setCellColor(id, color)
  {
    document.all[id].bgColor = color;
  }
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="75%" border="1">
  <tr>
    <td width="32%" id="c1"><a href="http://www.ibm.com/"
      onmouseover="setCellColor('c1','#cccccc');"
      onmouseout="setCellColor('c1','#ffffff');">IBM home
      page</a></td>
  </tr>
  <tr>
    <td width="32%" id="c2">
       <a href="http://www.yahoo.com/"
        onmouseover="setCellColor('c2','#cccccc');"
        onmouseout="setCellColor('c2','#ffffff');">
        Yahoo!</a></td>
  </tr>
  <tr>
    <td width="32%">&nbsp;</td>
  </tr>
</table>
</body>
</html>
sorry, move the id="c1" and id="c2" to the <tr> instead of the <td>
Avatar of sandworm23

ASKER

smoke, that's good for changing the bgcolor of a table cell, but it doesn't change the bgcolor of a text field within the cell, nor a second cell of a different original color. I'd need something more like:

setCellColor('thiscell','othercell','field1','field2','field3','color')

Which is what I may wind up doing, I just wanted to group all those elements together so I can essentially say to the browser "change the color of group one to this, and then change them all back."

Additionally, the document.all DOM is IE-only and this needs to be cross-browser compatible with Mozilla. We've chosen to ignore NN4 (they're directed to a static page and encouraged to upgrade) but the page has to work with at least IE5+ and NN6+. With multiple elements, getElementById() becomes redundant, once again.

The real issue here is how to group elements and apply a transformation to all elements within the group.
smoke, that's good for changing the bgcolor of a table cell, but it doesn't change the bgcolor of a text field within the cell, nor a second cell of a different original color. I'd need something more like:

setCellColor('thiscell','othercell','field1','field2','field3','color')

Which is what I may wind up doing, I just wanted to group all those elements together so I can essentially say to the browser "change the color of group one to this, and then change them all back."

Additionally, the document.all DOM is IE-only and this needs to be cross-browser compatible with Mozilla. We've chosen to ignore NN4 (they're directed to a static page and encouraged to upgrade) but the page has to work with at least IE5+ and NN6+. With multiple elements, getElementById() becomes redundant, once again.

The real issue here is how to group elements and apply a transformation to all elements within the group.
heh, oops. Resubmitted when I refreshed.
Take a look at this link and see if that can help with the cross browser issue. http://developer.irt.org/script/1420.htm
Also, move the id="c1" and id="c2" to the <tr> instead of the <td>
This will take care of all the cells within the row. If you want to change the bgcolor of text field, you will have to pass another parameter as you have indicated.
I hope this helps.

Smoke
If I would tell you that I can do what you want with just 2 funtions you woldn't belive me :))). In fact it works with 100 cells, and you don't have to write something like <td onmouseover="..." onmouseout="...">. If you want to know how you will have to e-mail me: ingerul@go.ro, because I've given some good answers and I haven't got any poit :)). The solution is very simple.
ingerul,

Offering solutins via email violates the site guidelines.  If you do it again I will ask admin to suspend your account until you undertake to follow the rules.

Cd&
Use naming conventions to tie everything together:
<tr id="A" onmouseover="chng(this.id,'salt',4)" onmouseout="chng(this.id,'s')">
   <td id="A0" class="A0cls">???</td>
   <td id="A1" class="A1cls">???</td>
   <td id="A2" class="A2cls">???</td>
   <td id="A3" class="A3cls">???</td>
</tr>
<tr id="B" onmouseover="chng(this.id,'salt',4)" onmouseout="chng(this.id,'s')">
   <td id="B0" class="B0cls">???</td>
   <td id="B1" class="B1cls">???</td>
   <td id="B2" class="B2cls">???</td>
   <td id="B3" class="B3cls">???</td>
</tr>
<tr id="C" onmouseover="chng(this.id,'salt',4)" onmouseout="chng(this.id,'s')">
   <td id="C0" class="C0cls">???</td>
   <td id="C1" class="C1cls">???</td>
   <td id="C2" class="C2cls">???</td>
   <td id="C3" class="C3cls">???</td>
</tr>
The alternate class name is the name with alt on the end ... C0cls would have an alternate class of C0clsalt
Then the function is:
function chng(therow,op,cellcnt)
{
      for (i=0;i<cellcnt;i++)
      {
         targetcell=id+i;
         targetcls=targetcell+op;
         document.getElementById(targetcell).className=targetcls;
      }
}

That should work for any number of rows, I passed the number of cells instead of hardcoding it in the function so that the function does not have to be modified if the number of columns changes.

Cd&
Cd, your suggestion should work in theory, but I'm getting an error that "'id' is not defined." I'm working on it...
Opps,

This:  targetcell=id+i;

Should be         targetcell=therow+i;


Sorry about that.

Cd&
yeah I got the id/therow thing, so there aren't any javascript errors. With a bit of tweaking it got it to work. However, it's only changing the table cells and not the form elements inside them, which is the whole goal I'm shooting for. Changing a table row color is easy, changing the form elements inside it is proving difficult.

Look at http://focalcurve.com/dev/sample.html for how I've implemented your code. (Garish colors for demo purposes only.)

The problem is tied to the GetElementById method, which as we know is meant to pluck a single element from the DOM tree based on its unique ID. However, I want to pluck several elements in one shot. Simply giving them the same ID doesn't work because the browser just uses the first matching ID it comes across. So to get around that, we'd have to make the script loop through an array of matching IDs, applying the transformation to each one it finds, and we're right back to my original question: how do I make a script apply a style to several elements with a single event?

ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Cd, enjoy your 275 points.
Glad we could help.  Thanks for the A. :^)

Cd&