Member Avatar for polo_coins

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
  • 177 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by polo_coins

Recommended Answers

All 6 Replies

Member Avatar for essential

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

Member Avatar for polo_coins

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 ?

Member Avatar for essential

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

Member Avatar for polo_coins

I still can get to solution
sorry

Member Avatar for essential

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

Member Avatar for polo_coins

thaanks a lot it solve my problem
Best Regards

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.