Changing the Background and Border Color of a <TD> onMouseOver

OK, I really thought this one was going to be simple and I could figure it out in a half hour or so. Well, two hours later it’s still not working! I still think it’s pretty easy for someone who knows what they’re doing.

I’m just trying to do some fairly simple style swapping with onMouseOver and OnMouseOut. I’ve been changing background colors for years and now I’m just trying to do one or two more things but I cannot get it to work.

Basically, I have a table and when the user mousse over a row I’m trying to change the background color AND the border color for that row. This is the part that I cannot get to work. I can get it to work on a <TD> but not on a <TR>. I know that I’ve got something overriding something else, but I just cannot figure it out.

I’m trying to achieve an effect just like Yahoo mail. When the user mousse over a row, that row changes it’s background color and border. Also the entire row is “clickable” (i.e. when the user mouses over any part of the row the cursor changes). And finally, the last row has two different links in it so I’m not sure how that’s going to work? If you have Yahoo mail you can take a look at exactly what I’m trying to achieve.

Here’s what I got so far:

<style>

td            {
            font-family: verdana, arial, helvetica, sans-serif;
            color: #333333;
            font-size: 11px;
            }
            
.white  {
            font-family: verdana, arial, helvetica, sans-serif;
            color: #ffffff;
            font-size: 11px;
            }
            
.folder_table {margin:2px; padding:2px; background:#EEEEEE; border:solid 1px #999999}

.folder_table tr.selected {
      background-color: #C1D2EE;
      border: 1px solid #316AC5;
}

.folder_table tr.over {
      background-color: #999999;
      border: 1px solid #666666;
}

.folder_table tr.out {
      background-color: #EEEEEE;
      border: 1px solid #EEEEEE;
}
</style>


<td bgcolor="#900028" width="160" valign="top">

<table width="100%" cellpadding="8" cellspacing="0" border="0">
<tr><td valign="top">
<table width="148" cellpadding="0" cellspacing="0" border="0" class="folder_table">
<tr bgcolor="#000000" height="23">
<td colspan="3">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="white"><b>FOLDER</b></td>
<td align="right" class="small_white">[<a href="#" class="link_white">ADD</a> &#150; <a href="#" class="link_white">EDIT</a>]</td></tr>
</table>
</td></tr>

<tr class="selected"><td width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td><td colspan="2"><b>Main</b></td></tr>

<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/folder_open.gif" width="18" height="18" border="0"></td><td colspan="2">Draft Campaigns</td></tr>


<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td><td colspan="2">Old Campaigns</td></tr>

<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/trash.gif" width="18" height="18" border="0"></td><td>Trash</td><td align="right" class="small">[<a href="#">EMPTY</a>]</td></tr>

</table>
</td></tr>
</table>
</td>
oldschwinnAsked:
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.

l0_0laelienCommented:
Hi, you can change the color of the TR and the font color like this:

<html>
<head>
<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(backColor,textColor){
  if(typeof(preEl)!='undefined') {
     preEl.bgColor=orgBColor;
     try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
     }
  var el = event.srcElement;
  el = el.parentElement;
  orgBColor = el.bgColor;
  orgTColor = el.style.color;
  el.bgColor=backColor;

  try{ChangeTextColor(el,textColor);}catch(e){;}
  preEl = el;
  }

function ChangeTextColor(a_obj,a_color){  ;
   for (i=0;i<a_obj.cells.length;i++)
    a_obj.cells(i).style.color=a_color;
    }
</script>
</head>
<body>
<table border=1 align=center>
<caption>Statistics</caption>
<th>Year</th>
<th>Team</th>
<tr  onMouseOver="HighLightTR('#c9cc99','cc3333');" >
<td align=right>1930</td>
<td align=right>Detroit</td>
</tr>
<tr  onMouseOver="HighLightTR('#c9cc99','cc3333');" >
<td align=right>1933</td>
<td align=right>Detroit</td>
</tr>
<tr  onMouseOver="HighLightTR('#c9cc99','cc3333');" >
<td align=right>1934</td>
<td align=right>Detroit</td>
</tr>
<tr  onMouseOver="HighLightTR('#c9cc99','cc3333');" >
<td align=right>1935</td>
<td align=right>Detroit</td>
</tr>
</table>

</body>
</html>
i hope this helps.. regards
0
oldschwinnAuthor Commented:
l0_0laelien,

I guess that's part of it, but I still cannot figure out how to do the <TR> border color or the link for the entire <TR>.

Maybe this is not as straightforward as I thought?

I'm increasing the points to 125.

Anyone?
0
l0_0laelienCommented:
hi oldschwinn i really have never seen how you can change the border color of the <TR> only the <TD>'s  but i've seen that when you apply the border-color style to the <TD> it changes only the bottom and left borders of the cell, you can make a <div> insede the <TD>'s and then change the div style..
regards
0

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
TkoManCommented:
oldschwinn,

How is this?(below)
The <tr> element doesn't contain a style.border attribute in the browsers DOM.
In order to create the effect  you need to change the all of the <td> elements that belong to the <tr>
You only need to change the top and bottom of the border.
Please note that in the example below I have assigned the <td>'s a class (folder_table_td) that gives them a border of 1px the same
color as the background. This is because if you have no border then assign a border when the browser rerenders the
page it shifts all the elements down a bit to make room for the border and looks messy.

Good Luck


<table>



<td bgcolor="#900028" width="160" valign="top">

<table width="100%" cellpadding="8" cellspacing="0" border="">
<tr><td valign="top">
<table width="148" cellpadding="0" cellspacing="0" border="1" class="folder_table">
<tr bgcolor="#000000" height="23">
<td colspan="3">

<table width="100%" cellpadding="0" cellspacing="0" border="">
<tr>
      <td class="white"><b>FOLDER</b></td>
      <td align="right" class="small_white">[<a href="#" class="link_white">ADD</a> &#150; <a href="#" class="link_white">EDIT</a>]</td></tr>                                        
</table>

</td></tr>

<tr class="selected">
      <td width="18">
            <img src="../images/icons/folder.gif" width="18" height="18" border="0">
      </td>
      <td colspan="2">
            <b>Main</b>
      </td>
</tr>

<tr style="border:1px solid blue" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')" >
      <td class="folder_table_td" width="18"><img src="../images/icons/folder_open.gif" width="18" height="18" border="0"></td>
      <td class="folder_table_td" colspan="2">Draft Campaigns</td>
</tr>


<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')">
      <td class="folder_table_td" width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td>
      <td class="folder_table_td" colspan="2">Old Campaigns</td>
</tr>

<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')">
      <td class="folder_table_td" width="18"><img src="../images/icons/trash.gif" width="18" height="18" border="0"></td>
      <td>Trash</td><td align="right" class="small">[<a href="#">EMPTY</a>]</td>
</tr>

</table>
</td></tr>
</table>
</td>

<script>
function ChangeRowColor(thisObj, newClassName)
{
      var children = thisObj.childNodes;
      
      for(i = 0; i < children.length; i++)
      {
            if(children.item(i).tagName == "TD")
                  children.item(i).className = newClassName;
                  
      }

}

</script>
0
TkoManCommented:
oops, for testing purposes I set the table border to one, it should be 0.
here it is again. :)

<table>



<td bgcolor="#900028" width="160" valign="top">

<table width="100%" cellpadding="8" cellspacing="0" border="">
<tr><td valign="top">
<table width="148" cellpadding="0" cellspacing="0" border="0" class="folder_table">
<tr bgcolor="#000000" height="23">
<td colspan="3">

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
      <td class="white"><b>FOLDER</b></td>
      <td align="right" class="small_white">[<a href="#" class="link_white">ADD</a> &#150; <a href="#" class="link_white">EDIT</a>]</td></tr>                                        
</table>

</td></tr>

<tr class="selected">
      <td width="18">
            <img src="../images/icons/folder.gif" width="18" height="18" border="0">
      </td>
      <td colspan="2">
            <b>Main</b>
      </td>
</tr>

<tr class="folder_table_tr"  onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')" >
      <td class="folder_table_td" width="18"><img src="../images/icons/folder_open.gif" width="18" height="18" border="0"></td>
      <td class="folder_table_td" colspan="2">Draft Campaigns</td>
</tr>


<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')">
      <td class="folder_table_td" width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td>
      <td class="folder_table_td" colspan="2">Old Campaigns</td>
</tr>

<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')">
      <td class="folder_table_td" width="18"><img src="../images/icons/trash.gif" width="18" height="18" border="0"></td>
      <td>Trash</td><td align="right" class="small">[<a href="#">EMPTY</a>]</td>
</tr>

</table>
</td></tr>
</table>
</td>

<script>
function ChangeRowColor(thisObj, newClassName)
{
      var children = thisObj.childNodes;
      
      for(i = 0; i < children.length; i++)
      {
            if(children.item(i).tagName == "TD")
                  children.item(i).className = newClassName;
                  
      }

}

</script>
0
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
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.