Change border color on mouseover, mouseout

function rowOver(newRow) {
  newRow.style.background='white';
  newRow.border='1pt solid #737B92';
}

function rowOut(newRow) {
  newRow.style.color='black';
  newRow.border='1pt solid black';
  newRow.style.background='transparent';    
}

Is not doing anything.  newRow.style.border has same effect.  Thanks
LVL 6
dgelinasAsked:
Who is Participating?
 
ZontarConnect With a Mentor Commented:
More MSIE proprietary junk.

And it's incorrect as well.

And, since no-one seems to be listening to dorward, let me join in the chorus:

TABLE ROWS DO NOT HAVE BORDERS!

(Nor can you give them one using JS.)


Here's what you *can* do:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
  .myTR {background-color:#EEE;}
  .myTR td {border-style:solid; border-color:#000; border-width:2px 0px 2px 0px; padding:15px 25px; margin:0px;}
  .myTR td.first {border-width:2px 0px 2px 2px;}
  .myTR td.last {border-width:2px 2px 2px 0px;}
</style>

<script type="text/javascript">
function over()
{
  this.style.backgroundColor = "#FF0";
  var TDs = this.getElementsByTagName("td");
  for(i = 0; i < TDs.length; i++)
    TDs[i].style.borderColor = "#F00";
}

function out()
{
  this.style.backgroundColor = "#EEE";
  var TDs = this.getElementsByTagName("td");
  for(i = 0; i < TDs.length; i++)
    TDs[i].style.borderColor = "#000";
}

function init()
{
  var table = document.getElementById("myTable");
  var TRs = table.getElementsByTagName("tr");
  for(var i = 0; i < TRs.length; i++)
  {
    TRs[i].onmouseover = over;
    TRs[i].onmouseout = out;
  }
}

window.onload = init;
</script>

</head>
<body>

<table id="myTable" cellspacing="0">
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
<tr class="myTR"><td class="first">text...</td><td>text...</td><td>text...</td><td class="last">text...</td></tr>
</table>

</body>
</html>


Works in MSIE 5+/NS6+/Mozilla/Opera 6+.
0
 
dorwardCommented:
Rows don't have borders, only cells and the table itself.

Something like:

<tr onmouseover="this.class='over';" onmouseout="this.class='';">
<td class="first">la la</td>
<td>la la</td>
<td>la la</td>
<td>la la</td>
<td class="last">la la</td>
<tr>

along with a style sheet along the lines off:

td.first {
 border-left: 2px solid black;
}

td.last {
 border-right: 2px solid black;
}

td {
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

.over td {
  border-color: white;
}
0
 
ric7hoCommented:
try:
function rowOver(newRow) {
  document.all[newRow].style.background='white';
  document.all[newRow].style.border='1pt solid #737B92';
}

function rowOut(newRow) {
  document.all[newRow].style.color='black';
  document.all[newRow].style.border='1pt solid black';
  document.all[newRow].style.background='transparent';    
}
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
dorwardCommented:
Well...

(a) document.all is non-standard proprietary junk

and

(b) table rows still don't have a border
0
 
WitchazelCommented:
function rowOver(newRow) {
  newRow.style.background='white';
  newRow.border='1pt solid #737B92';
}

function rowOut(newRow) {
  newRow.style.color='black';
  newRow.border='1pt solid black';
  newRow.style.background='transparent';    
}

should be

function rowOver(newRow) {
  newRow.style.backgroundColor='white';    // notice the Color
  newRow.style.border='1pt solid #737B92';    // notice the style
}

function rowOut(newRow) {
  newRow.style.color='black';  
  newRow.style.border='1pt solid black';  // notice the style
  newRow.style.backgroundColor='transparent';      // notice the Color
}

another nice thing to do is

<script>
function hilite() {
  event.srcElement.style.color='black';
  event.srcElement..style.border='1pt solid black';
  event.srcElement.style.backgroundColor='transparent';    
}
function lowlite() {
  event.srcElement.style.color='white';
  event.srcElement..style.border='1pt solid blue';
  event.srcElement.style.backgroundColor='green';    
}
</script>
<div onmouseover=hilite onmouseout=lowlite>HIHI</div>

then you dont hafta care what element called it :)


-w
0
 
WitchazelCommented:
um  he never said it was a table :)
please read before you nag :P

0
 
dorwardCommented:
Witchazel: Tables are the only bits of HTML that have rows. It was pretty obvious from the context.
0
 
ZontarCommented:
Yes, when somebody says "rows" (or in this case "newRow") in a HTML context without further qualification, I would automatically assume "table row". The fact that the original questioned that changing newRow.style.border had no effect was a further clue that this was the correct interpretation.

Also, your solution

<script>
function hilite() {
  event.srcElement.style.color='black';
  event.srcElement..style.border='1pt solid black';
  event.srcElement.style.backgroundColor='transparent';    
}
function lowlite() {
  event.srcElement.style.color='white';
  event.srcElement..style.border='1pt solid blue';
  event.srcElement.style.backgroundColor='green';    
}
</script>
<div onmouseover=hilite onmouseout=lowlite>HIHI</div>

would be better written as

<script>
function hilite(e)
{
  var el;

  if(!e)
  {
    e = window.event;
    el = e.srcElement;
  }
  else
    el = e.target;

  el.style.color='black';
  el.style.border='1pt solid black';
  el.style.backgroundColor='transparent';    
}
function lowlite(e)
{
  var el;

  if(!e)
  {
    e = window.event;
    el = e.srcElement;
  }
  else
    el = e.target;

  el.style.color='white';
  el.style.border='1pt solid blue';
  el.style.backgroundColor='green';    
}
</script>
<div onmouseover="hilite();" onmouseout="lowlite();">HIHI</div>

This would make it cross-browser.

However, setting the event handlers in script and then using "this" in the handler functions will do the same thing with less code for more elements.
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.