n00b Q - Changing Background Color of Table Cells on Click

TurMan · 08-20-2011, 12:04 AM

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>

BluePanther · 08-20-2011, 06:53 AM

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

TurMan · 08-20-2011, 04:49 PM

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?

sunfighter · 08-20-2011, 06:50 PM

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>

Old Pedant · 08-21-2011, 02:29 AM

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="#".

Old Pedant · 08-21-2011, 02:34 AM

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>

webdev1958 · 08-21-2011, 02:49 AM

Quote:

Originally Posted by TurMan

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.

Old Pedant · 08-21-2011, 03:05 AM

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.

webdev1958 · 08-21-2011, 10:09 AM

Quote:

Originally Posted by Old Pedant

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>

TurMan · 08-21-2011, 06:51 PM

You guys are awesome!!!!!! Thanks so much for all of the advice and ideas! I should be set now!!!

THANKS!!!!!