[SOLVED] Change <tr> background color on mouse hover?

[Jason28]

I tried searching the net but it seems that everything related to this question is from a forum post of someone asking how to do this and people posting a bunch of incorrect code or do not provide all of the code including the html to make it work.  I simple want a <tr> value so that when you mouseover it will change color.  I plan to use this on a list so that when the user mouses over a listing it will be highlighted.  If you could provide a working example that would be great.  Thanks

[smerny]

why not just use CSS?

 

edit: just tested and apparently only works with th

[smerny]

try something like

 

<script>

function changebg(id) {

document.getElementById(id).style.backgroundColor = "red";

}

</script>

 

<table style="background-color:#fff;">

<tr>

<td id="cell1" onmouseover="changebg('cell1')">cell</td>

</tr>

</table>

 

 

 

[smerny]

sorry, you wanted row... same thing though

 

<script>
function changebg(id) {
document.getElementById(id).style.backgroundColor = "red";
}
</script> 

<table style="background-color:#fff;">
<tr id="row1" onmouseover="changebg('row1')">
<td>row1</td>
</tr>
<tr id="row2" onmouseover="changebg('row2')">
<td>row2</td>
</tr>
</table>

[xenophobia]

<table id="rowhover">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
  <tr>
    <td>Row 4</td>
  </tr>
</table>

<script>
// Make sure you put this code below your table. ^^v
var table = document.getElementById('rowhover');
var rows = table.getElementsByTagName('tr');

for(var i=0,len=rows.length; i<len; i++) {
  var row = rows[i];
  row.onmouseover = function(e) {
    this.style['background-color'] = 'black';
    this.style['color'] = 'white';
  };

  row.onmouseout = function(e) {
    this.style['background-color'] = 'white';
    this.style['color'] = 'black';
  };
}
</script>

 

I haven't test out this code, i just write instantly.... Apologize if its not working... 

[Jason28]

Sorry, I never received email notifications that anyone replied to this topic.  Well your examples work kinda, smerny your example keeps the row the same color and doesn't change back on mouseout.  Xeno, your example changes the text color and not the background colors of the rows.  I simple want the same feature that just about every corporate site uses.  For example, look at RealTracs:

 

http://www.realtracs.com/PropertyDetail.aspx?&ByMLS=1&PropertyClass=RES&DMQL=(MlsNum%3d1043588)%2c&AreaID=8&MlsNum=1043588&Digest=61fEwGSSW3oELMJza71jSw

 

If you mouseover the rows on the right, you will see that they light up blue.

[haku]

Put this in the head of your document:

 

<style type="text/css">
  tr:hover
  {
    background-color:red;
  }
</style>

 

It won't work on IE6, but will work on pretty much every other modern browser (not that IE6 is modern, but its still in use).

[Jason28]

Thanks that is what I needed   I knew it couldn't have been that complex.