AJAX

script for change<tr bgcolor> by mouseover

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Oct 2008

Posts: 63

Reputation: polo_coins is an unknown quantity at this point

Solved Threads: 0

polo_coins polo_coins is offline

Offline

Junior Poster in Training

script for change<tr bgcolor> by mouseover

Aug 10th, 2009

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

Help with Code Tags

(Toggle Plain Text)


<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

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: script for change<tr bgcolor> by mouseover

Aug 10th, 2009

Hi,

try this first:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<?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>
<?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

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Oct 2008

Posts: 63

Reputation: polo_coins is an unknown quantity at this point

Solved Threads: 0

polo_coins polo_coins is offline

Offline

Junior Poster in Training

Re: script for change<tr bgcolor> by mouseover

Aug 10th, 2009

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

Help with Code Tags

(Toggle Plain Text)

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

do you know what a reason ?

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: script for change<tr bgcolor> by mouseover

Aug 10th, 2009

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

Last edited by essential; Aug 10th, 2009 at 2:53 pm.

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Oct 2008

Posts: 63

Reputation: polo_coins is an unknown quantity at this point

Solved Threads: 0

polo_coins polo_coins is offline

Offline

Junior Poster in Training

Re: script for change<tr bgcolor> by mouseover

Aug 10th, 2009

I still can get to solution
sorry

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: script for change<tr bgcolor> by mouseover

Aug 10th, 2009

Hi polo,

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

sample-document:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<?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>
<?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>