Mouseover/Mouseout alternating row colors w/form elements

I'm guessing this is pretty simple, but I haven't done this before so I'm not sure how to go about it, or the most efficient way to go about this.
Anyway, I have a simple table, this example has 4 rows, a title row and then three basic rows. Each of the rows <td>'s have text fields in them. In my table you won't be able to see the <tr> background so changing it's color is useless for this app. What I want to do is apply style background color to the text fields such that each text field in a given row have the same color. And then have the table alternate row colors(the background color of the text fields) and when there is a mouseover event highlight that row... ie: change the style background color for that rows elements.

in the larger picture of things the table rows are dynamically generated through a coldfusion query, so I'm going to have to apply this to dynamically generated rows, but for the time I think if I had an idea to go about this I could make the changes myself.

here's a basic table layed out how I'm mentioning in my question...

<table width="45%" border="1" cellspacing="0" cellpadding="0">
  <tr bgcolor="#006666">
    <td width="17%"><div align="center"><font color="#FFFFFF">Column 1</font></div></td>
    <td width="11%"><div align="center"><font color="#FFFFFF">Column 2</font></div></td>
    <td width="72%"><div align="center"><font color="#FFFFFF">Column 3</font></div></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield"></td>
    <td><input type="text" name="textfield2"></td>
    <td><input type="text" name="textfield3"></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield4"></td>
    <td><input type="text" name="textfield5"></td>
    <td><input type="text" name="textfield6"></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield7"></td>
    <td><input type="text" name="textfield8"></td>
    <td><input type="text" name="textfield9"></td>
  </tr>
</table>

thanks,
~trail
LVL 20
trailblazzyr55Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

benwiggyCommented:
In PHP I would do it like this, it works well in a for loop...:
<?php
$className="";
      if($className=='rowcolor1') { $className = 'rowcolor2'; } else { $className = 'rowcolor1'; }
      echo "<td class='$className'>";
?>
~BW~
mrichmonCommented:
I think you are saying you want the background of the input boxes to change?  If so...

Well what I would do is 2 fold. (I chose ugly colors, but you can easily change)

1) Define a class in CSS for each type

.classEven input { background-color: red; }
.classEven input:hover { background-color: magenta; }

.classOdd input { background-color: green; }
.classOdd input:hover { background-color: orange; }

2) Use your server side language to add these classes to the tds as they are generated.

In Cold Fusion:

<table width="45%" border="1" cellspacing="0" cellpadding="0">
<tr bgcolor="#006666">
    <td width="17%"><div align="center"><font color="#FFFFFF">Column 1</font></div></td>
    <td width="11%"><div align="center"><font color="#FFFFFF">Column 2</font></div></td>
    <td width="72%"><div align="center"><font color="#FFFFFF">Column 3</font></div></td>
  </tr>
<cfoutput query="yourquery">
   <tr>
     <td class="<cfif CurrentRow mod 2 EQ 0>classEven<cfelse>classOdd</cfif>"><input type="text"></td>
     <td class="<cfif CurrentRow mod 2 EQ 0>classEven<cfelse>classOdd</cfif>"><input type="text"></td>
     <td class="<cfif CurrentRow mod 2 EQ 0>classEven<cfelse>classOdd</cfif>"><input type="text"></td>
  </tr>
</cfoutput>
     

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
trailblazzyr55Author Commented:
mrichmon,

Nice, thanks ;o)

I did a slight modification.. but works great! hehe.. Nice choice of holiday colors..lol

this is what i did...

<style type="text/css">
.classEven input { background-color: EEEEEE; }
.classOdd input { background-color: DDDDDD; }
.classOver input { background-color: 000066; color: FFFFFF;}
</style>

<table width="45%" border="1" cellspacing="0" cellpadding="0">
  <tr bgcolor="#006666">
    <td width="17%"><div align="center"><font color="#FFFFFF">Column 1</font></div></td>
    <td width="11%"><div align="center"><font color="#FFFFFF">Column 2</font></div></td>
    <td width="72%"><div align="center"><font color="#FFFFFF">Column 3</font></div></td>
  </tr>
<cfoutput query="myquery">
<cfset FormColor=IIF(currentrow MOD 2, DE('classEven'), DE('classOdd'))>
  <tr onMouseOver="this.className='classOver';" onMouseOut="this.className='#FormColor#';" class="#FormColor#">
    <td><input type="text" name="textfield1"></td>
    <td><input type="text" name="textfield2"></td>
    <td><input type="text" name="textfield3"></td>
  </tr>
</cfoutput>
</table>

regards,
~trail
mrichmonCommented:
Ah yes - there you are using javascript to do the hover effect rather than CSS.  That works too.
janine teronCommented:
Practical piece , Just to add my thoughts , if someone is requiring a URL - IRS W-2 , my family saw a blank document here <code>https://goo.gl/h8uyXg</code>.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.