0

I wrote this code bellow but it doesn't work how I get to bgcolor of tr tag?

<table id="menutable" name="table1">
<tr onmouseover="ChangeCol()" id="tr_1"><li><a href="main.html" name="main" target="main">Main Page</a><br/></tr>



<script language="JavaScript" type="text/javascript">
<!--
function ChangeCol()
{
var col="#998800";
document.menu.tr_1.bgcolor=col;
}
//-->
</script>

thanks.Sergey

2
Contributors
6
Replies
7
Views
8 Years
Discussion Span
Last Post by polo_coins
0

Hi,

try this first:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
<script type="text/javascript">
// <![CDATA[
var ChangeCol = function() {
   var table = (( table =  document.getElementById("menutable")) ? table : menutable );
   col = "#998800";
   var cell1 = table.rows[ 0 ].cells( 0 ).style.backgroundColor = col;

};

// ]]>
</script>
</head>
<body>
<div id="main">
<table id="menutable" frame="void" rules="none" summary="JavaScript :: Live Demo!" cellspacing="4" cellpadding="4">
<tr><td><ul>
<li><a href="main.html" onmouseover="ChangeCol();">Main Page</a></li>
</ul></td>
</tr>
</table>
</div>
</body>
</html>

-essential

0

it's look likewhat I look for but I get some exception on line:

[B]var cell1 = table.rows[ 0 ].cells( 0 ).style.backgroundColor =  col;[/B]

do you know what a reason ?

0

Hi,

you can use the document.getElementById( yourElementId ).setAttribute("style", "background-color:" + col ); instead of the style rule.

Try to throw some exceptions' over the lines, so that you wil be able to filter the desired output.

It's getting late out here, so i'l just post back at you later and will provide you with another brief example.

-essential

0

Hi polo,

here is your demo, and im sure you can easily adapt to it.

sample-document:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css_level21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
<style id="css21" type="text/css">
/* <![CDATA[ */
a { text-decoration : none; letter-spacing : 2px; color : #FF0000; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var changeCol = function( anc ) {
var anc = anc;
var myCell = anc.parentNode;
   try { myCell.style.backgroundColor = anc.id;
   } catch( e ) {
      myCell.setAttribute( "style", anc.title );
   } anc.onmouseout = function() {
      try {
         myCell.style.backgroundColor = "#FFFFFF";

      } catch( e1 ) {
         myCell.removeAttribute("style");
      }
   }
};

// ]]>
</script>
</head>
<body id="xhtml11">
<table id="tableOne" frame="box" rules="all" cellpadding="8" cellspacing="4" border="2" width="100%">
<caption>JavaScript :: BGColor Changer</caption>
<thead>
<tr>
<th>BLUE</th>
<th>GREY</th>
<th>PERU</th>
<th>LIME</th>
</tr>
</thead>
<tfoot>
<tr>
<td align="left" colspan="4"><p>A simple demonstration of changing table-cell background in <span title="JavaScript :: background-color-changer"><em>JavaScript</em></span>.</p></td>
</tr>
</tfoot>
<tbody>
<tr>
<td align="center"><a id="#0000FF" title="background-color : blue" href="#" onmouseover="changeCol( this );">&lt;change-to-blue&gt;</a></td>
<td align="center"><a id="#808080" title="background-color : grey" href="#" onmouseover="changeCol( this );">&lt;change-to-grey&gt;</a></td>
<td align="center"><a id="#CD853F" title="background-color : peru" href="#" onmouseover="changeCol( this );">&lt;change-to-peru&gt;</a></td>
<td align="center"><a id="#00FF00" title="background-color : lime" href="#" onmouseover="changeCol( this );">&lt;change-to-lime&gt;</a></td>
</tr>
</tbody>
</table>
</body>
</html>

it comes with a basic lines, hope you can enjoy it...
-essential

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.