Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    n00b Q - Changing Background Color of Table Cells on Click

    OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue.
    Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked.

    Any help would be awesome!!!!
    Thanks!!!!!!

    Code:
    <html> 
    <head><title>menu</title>
    
    <script type="text/javascript"> 
    var element = null;
    
    function select(xx) 
    { 
    if ( element ) { 
    element.style.backgroundColor='gray'; 
    
    } 
    element = xx; 
    xx.style.backgroundColor='navy'; 
    
    } 
    </script>
    
    <style type="text/css"> 
    a {text-decoration:none; color:white} 
    a:visited {color:white} 
    a:active {color:white} 
    a:hover {color:white} 
    table#lay_menu {width:100%; margin:0px} 
    table#lay_menu td {text-align:center; width:20%} 
    .menu {text-align:center; background-color:gray; } 
    .start {text-align:center; background-color:navy; }
    </style> 
    </head>
    
    <body> 
    <table id="layout">
    <tr> 
    <td width="188"> 
    <a href="#">
    <div class="menu" onClick="select(this)">Artists</div>
    </a></td> 
    </tr>
    <tr>
      <td><a href="#">
        <div class="menu" onClick="select(this)">CPAs</div>
      </a></td>
      </tr>
    <tr>
      <td><a href="#">
        <div class="menu" onClick="select(this)">Doctors</div>
      </a>&nbsp;</td>
      </tr>
    <tr>
      <td>&nbsp;</td>
      </tr>
    <tr>
      <td>&nbsp;</td>
      </tr> 
    </table> 
    </body> 
    </html>

  • #2
    Senior Coder
    Join Date
    Jul 2011
    Posts
    1,226
    Thanks
    3
    Thanked 171 Times in 171 Posts
    Been a while since I properly touched javascript, but was browsing the unanswered questions and after reading, I think I can help.

    Try changing the class of the first option to class="start". The start CSS definition is already set to navy, so that should work I think. Not a javascript fix, but should still work

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Blue panther - thanks for your help!
    But there's still a problem. The first option doesn't change to gray when another option is chosen.

    Any ideas how to deal with this?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,036
    Thanks
    23
    Thanked 589 Times in 588 Posts
    TurMan I made some changes to your script. When you use onClick="select(this) you are sending [object HTMLDivElement] to your js function. Not sure if this is a good idea when you could use an ID. Add an alert to your function to see what it's working with.
    Code:
    function select(xx)
    {
    	alert(xx);die;
    if ( element ) {...
    Since your doing this in a nav menu an ID for each <TD> is not out of the question for.

    I'm sure you know most of your css is not used. So I just eliminated the unused and redid it a little bit. Here's what I came up with:
    Code:
    <html>
    <head><title>menu</title>
    <script type="text/javascript">
    var element = null;
    function select(id)
    {
    if (element)
    {
    	document.getElementById(element).style.backgroundColor='gray';
    }else{
    	document.getElementById('menu_1').style.backgroundColor='gray';
    }
    element = id;
    document.getElementById(id).style.backgroundColor='navy';
    }
    </script>
    <style type="text/css">
    a {text-decoration:none; color:white}
    #layout td
    {
    	background-color: gray;
    	text-align:center;
    	width: 188px;
    }
    #menu_1
    {
    	background-color: navy;
    }
    </style>
    </head>
    <body>
    <table id="layout">
    <tr>
    <td>
    <a href="#">
    <div id="menu_1" onClick="select('menu_1')">Artists</div>
    </a></td>
    </tr>
    <tr>
      <td><a href="#">
        <div id="menu_2" onClick="select('menu_2')">CPAs</div>
      </a></td>
      </tr>
    <tr>
      <td><a href="#">
        <div id="menu_3" onClick="select('menu_3')">Doctors</div>
      </a></td>
      </tr>
    </table>
    </body>
    </html>

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Pardon me, but that won't do *anything* about changing the color of the *OTHER* divs.

    Try this:
    Code:
    <html>
    <head>
    <style type="text/css"
    table#layout td
    {
    	background-color: gray;
    	text-align:center;
    	width: 188px;
            color: white; /* ??? if this is the only reason you had the < a > tags */
    }
    </style>
    <script type="javascript">
    furnction select(which)
    {
        var tds = document.getElementById("layout").getElementsByTagName("td");
        for ( var t = 0; t < tds.length; ++t )
        {
            tds[t].style.backgroundColor = ( which == td ) ? "navy" : "gray";
        }
    }
    </script>
    </head>
    <body>
    <table id="layout">
    <tr>
        <td onclick="select(this);">Artists</td>
    </tr>
    <tr>
        <td onclick="select(this);">CPAs</td>
    </tr>
    <tr>
        <td onclick="select(this);">Doctors</td>
    </tr>
    </table>
    </body>
    </html>
    See? Loop through *all* the td's changing all except the clicked-on one to gray background. The clicked on one gets navy.

    No need for the <div>s. No need for the <a>s.

    In fact, the <a>s are a mistake. You'd need to cancel their onclick else the page will reload because of the href="#".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    NOTE: If you only want the background color of *some* of the td's to change, then just give them a class name and look for it:
    Code:
    <html>
    <head>
    <style type="text/css"
    td.menu
    {
    	background-color: gray;
    	text-align:center;
    	width: 188px;
            color: white; /* ??? if this is the only reason you had the < a > tags */
    }
    </style>
    <script type="javascript">
    furnction select(which)
    {
        var tds = document.getElementById("layout").getElementsByTagName("td");
        for ( var t = 0; t < tds.length; ++t )
        {
            if ( tds[t].className == "menu" )
            {
                tds[t].style.backgroundColor = ( which == td ) ? "navy" : "gray";
            }
        }
    }
    </script>
    </head>
    <body>
    <table id="layout">
    <tr>
        <td class="menu" onclick="select(this);">Artists</td>
    </tr>
    <tr>
        <td class="menu" onclick="select(this);">CPAs</td>
    </tr>
    <tr>
        <td class="menu" onclick="select(this);">Doctors</td>
    </tr>
    <tr>
        <td>This cell is not clickable and not affected</td>
    </tr>
    </table>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by TurMan View Post
    OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue.
    Do you want just the active menu tab to be highlighted when the menu tab is clicked?

    This thread gives an example using the bodyID/class method which doesn't require javascript at all and uses just css.

    If you're familiar with css I think you'll find doing this with css is easier and definitely uses much less code than javascript.
    Last edited by webdev1958; 08-21-2011 at 02:57 AM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I don't think he wants to actually change pages when a <td> is clicked on. Those pages show how to use a common CSS file to highlight the appropriate tab (or whatever) for the current page, but they don't show how to highlight tabs (<div>s, essentially) within a single page. Unless I don't understand them at all. (Certainly the second link is only for multiple pages. And interesting that they chose to do it with classes, I've done it with IDs, myself:
    Code:
    <style>
    #navbar span {
        color: black;
    }
    #page1 #navbar #home,
    #page2 #navbar #about,
    #page2 #navbar #contact {
       color: red;
    }
    </style>
    ...
    <body id="page1">
        <div id="navbar">
            <span id="home">Home</span>
            <span id="about">About Us</span>
            <span id="contact">Contact Us</span>
        </div>
    ...
    Where the navbar of course comes from either a server-side or JS include.
    Last edited by Old Pedant; 08-21-2011 at 03:12 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by Old Pedant View Post
    And interesting that they chose to do it with classes, I've done it with IDs, myself:
    It makes no difference whether you use classes or id's. All that matters is that the selectors match which ever you use.

    btw old pedant, if you copy and paste your code in post no. 6 and run it you'll get a lot of errors. I have made the syntax corrections to your code in red. There is still a logic error because td is undefined in which == td and which is an object anyway. I stopped checking for errors here.

    Code:
    <html>
    <head>
    <style type="text/css">
    td.menu
    {
    	background-color: gray;
    	text-align:center;
    	width: 188px;
            color: white; /* ??? if this is the only reason you had the < a > tags */
    }
    </style>
    <script type="text/javascript">
    function select(which)
    { //function was misspelt
        var tds = document.getElementById("layout").getElementsByTagName("td");
        for ( var t = 0; t < tds.length; ++t )
        {
            if ( tds[t].className == "menu" )
            {
             //which is an object and td is undefined   
             tds[t].style.backgroundColor = ( which == td ) ? "navy" : "gray";
            }
        }
    }
    </script>
    </head>
    <body>
    <table id="layout">
    <tr>
        <td class="menu" onclick="select(this);">Artists</td>
    </tr>
    <tr>
        <td class="menu" onclick="select(this);">CPAs</td>
    </tr>
    <tr>
        <td class="menu" onclick="select(this);">Doctors</td>
    </tr>
    <tr>
        <td>This cell is not clickable and not affected</td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by webdev1958; 08-21-2011 at 10:45 AM.

  • #10
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You guys are awesome!!!!!! Thanks so much for all of the advice and ideas! I should be set now!!!

    THANKS!!!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •