javascript onload

<table>
<Tr><Td>Column1</td><td>Column2</td></tr>
<tr><Td>hello</td>John</td><td><a href>Continue</a></td></tr>
<tr><Td>hi</td>Mary</td><td><a href>Continue</a></td></tr>
</table>

When each Continue link is mouse over And each row is mouseover, is it possible
to change the <tr> bgcolor = red for example? and also make Continue text in yellow eg.?
And make sure the Column subject will not be impacted with mouse-over event?

Thanks
Webboy2008Asked:
Who is Participating?
 
ZvonkoSystems architectCommented:
Check this:
<html>
<head>
<title>Zvonko &#42;</title>
<style>
#myTab tr.rowHow {
  background-color: cornflowerblue;
}
#MyTab a:hover {
  background-color: yellow;
}
</style>
<script>
function hoverRow(e){
  if(!e) e=window.event;
  var theRow = (e.target)?e.target:e.srcElement;
  while(theRow && theRow.nodeName!="TR"){theRow = theRow.parentNode;}
  if(theRow && theRow.rowIndex){
    theRow.className = theRow.className.replace(" rowHow","");
    if(e.type=="mouseover"){theRow.className += " rowHow";}
  }
}
</script>
</head>
<body>
<table id=myTab onMouseOver="hoverRow(event)" onMouseOut="hoverRow(event)" >
<thead>
<Tr class="myHead"><Td>Column1</td><td>Column2</td></tr>
</thead>
<tbody>
<tr><td>hello</td><td>John</td><td><a href="#">Continue</a></td></tr>
<tr><td>hi</td><td>Mary</td><td><a href="#">Continue</a></td></tr>
</tbody>
</table>
</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
assuming that table id is 'table1'
window.onload = function(){
  var rows = document.getElementById("table1").rows;

  for ( var counter = 0; counter < rows.length; counter++)
  {
    var row = rows[ counter ];
    row.onmouseover = function(){
      row.style.backgroundColor = "red";
      var secondCell = row.cells[1];
      secondCell.style.color = "yellow";
    };
    row.onmouseout = function(){
      row.style.backgroundColor = "#fff";
      var secondCell = row.cells[1];
      secondCell.style.color = "black";
    };
  }
};
0
 
Webboy2008Author Commented:
Zvonko: Great Working.
Another one if you have time. Thanks,
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27292873.html
0
 
Albert Van HalenAnalyst developerCommented:
If you want to use a JS library like jquery, check out this working example:
http://jsfiddle.net/HLUbH/
0
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.

All Courses

From novice to tech pro — start learning today.