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
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
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 ?
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
I still can get to solution
sorry
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 );"><change-to-blue></a></td>
<td align="center"><a id="#808080" title="background-color : grey" href="#" onmouseover="changeCol( this );"><change-to-grey></a></td>
<td align="center"><a id="#CD853F" title="background-color : peru" href="#" onmouseover="changeCol( this );"><change-to-peru></a></td>
<td align="center"><a id="#00FF00" title="background-color : lime" href="#" onmouseover="changeCol( this );"><change-to-lime></a></td>
</tr>
</tbody>
</table>
</body>
</html>it comes with a basic lines, hope you can enjoy it...
-essential
thaanks a lot it solve my problem
Best Regards
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.