943,987 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > script for change<tr bgcolor> by mouseover
Ad:
Permalink
Aug 10th, 2009
0

script for change<tr bgcolor> by mouseover

Expand Post »
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
Similar Threads
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
polo_coins is offline Offline
63 posts
since Oct 2008
Permalink
Aug 10th, 2009
0

Re: script for change<tr bgcolor> by mouseover

Hi,

try this first:
javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5. <head>
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  10. <title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
  11. <script type="text/javascript">
  12. // <![CDATA[
  13. var ChangeCol = function() {
  14.    var table = (( table =  document.getElementById("menutable")) ? table : menutable );
  15.    col = "#998800";
  16.    var cell1 = table.rows[ 0 ].cells( 0 ).style.backgroundColor = col;
  17.  
  18. };
  19.  
  20. // ]]>
  21. </script>
  22. </head>
  23. <body>
  24. <div id="main">
  25. <table id="menutable" frame="void" rules="none" summary="JavaScript :: Live Demo!" cellspacing="4" cellpadding="4">
  26. <tr><td><ul>
  27. <li><a href="main.html" onmouseover="ChangeCol();">Main Page</a></li>
  28. </ul></td>
  29. </tr>
  30. </table>
  31. </div>
  32. </body>
  33. </html>

-essential
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 10th, 2009
0

Re: script for change<tr bgcolor> by mouseover

it's look likewhat I look for but I get some exception on line:
var cell1 = table.rows[ 0 ].cells( 0 ).style.backgroundColor =  col;

do you know what a reason ?
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
polo_coins is offline Offline
63 posts
since Oct 2008
Permalink
Aug 10th, 2009
0

Re: script for change<tr bgcolor> by mouseover

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.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 10th, 2009
0

Re: script for change<tr bgcolor> by mouseover

I still can get to solution
sorry
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
polo_coins is offline Offline
63 posts
since Oct 2008
Permalink
Aug 10th, 2009
0

Re: script for change<tr bgcolor> by mouseover

Hi polo,

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

sample-document:
javascript Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <?xml-stylesheet type="text/css" href="#css_level21" media="screen"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  4.    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  6. <head>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <title>http://www.daniweb.com :: DHTML  JavaScript / AJAX</title>
  12. <style id="css21" type="text/css">
  13. /* <![CDATA[ */
  14. a { text-decoration : none; letter-spacing : 2px; color : #FF0000; }
  15. /* ]]> */
  16. </style>
  17. <script type="text/javascript">
  18. // <![CDATA[
  19. var changeCol = function( anc ) {
  20. var anc = anc;
  21. var myCell = anc.parentNode;
  22.    try { myCell.style.backgroundColor = anc.id;
  23.    } catch( e ) {
  24.       myCell.setAttribute( "style", anc.title );
  25.    } anc.onmouseout = function() {
  26.       try {
  27.          myCell.style.backgroundColor = "#FFFFFF";
  28.  
  29.       } catch( e1 ) {
  30.          myCell.removeAttribute("style");
  31.       }
  32.    }
  33. };
  34.  
  35. // ]]>
  36. </script>
  37. </head>
  38. <body id="xhtml11">
  39. <table id="tableOne" frame="box" rules="all" cellpadding="8" cellspacing="4" border="2" width="100%">
  40. <caption>JavaScript :: BGColor Changer</caption>
  41. <thead>
  42. <tr>
  43. <th>BLUE</th>
  44. <th>GREY</th>
  45. <th>PERU</th>
  46. <th>LIME</th>
  47. </tr>
  48. </thead>
  49. <tfoot>
  50. <tr>
  51. <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>
  52. </tr>
  53. </tfoot>
  54. <tbody>
  55. <tr>
  56. <td align="center"><a id="#0000FF" title="background-color : blue" href="#" onmouseover="changeCol( this );">&lt;change-to-blue&gt;</a></td>
  57. <td align="center"><a id="#808080" title="background-color : grey" href="#" onmouseover="changeCol( this );">&lt;change-to-grey&gt;</a></td>
  58. <td align="center"><a id="#CD853F" title="background-color : peru" href="#" onmouseover="changeCol( this );">&lt;change-to-peru&gt;</a></td>
  59. <td align="center"><a id="#00FF00" title="background-color : lime" href="#" onmouseover="changeCol( this );">&lt;change-to-lime&gt;</a></td>
  60. </tr>
  61. </tbody>
  62. </table>
  63. </body>
  64. </html>

it comes with a basic lines, hope you can enjoy it...
-essential
Last edited by essential; Aug 10th, 2009 at 9:17 pm.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Aug 11th, 2009
0

Re: script for change<tr bgcolor> by mouseover

thaanks a lot it solve my problem
Best Regards
Reputation Points: 8
Solved Threads: 0
Junior Poster in Training
polo_coins is offline Offline
63 posts
since Oct 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: readyState looping?
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: something about radiobutton on JavaScript





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC