Help with changing table colors

[shawn524]

Hi, I hope this is in the right forum. I've been searching through the forums for some time and I just can't find anything that I can use. I have this school project that I need to do for web design class and I can't figure out how to do this.

I have multiple tables in different rows and I’m trying to make it change the color of a table when someone clicks on it. Like switch back and forth between two colors every click.

This is a rough mock up of what it’s supposed to look like, minus the color switching.

Any help at all would be greatly appreciated.

[jscheuer1]

First off, I'd feel bad helping someone out with their homework too much. Someone else in here may not feel so bad about that, I don't know. I've worked out one solution to this rather simple puzzle that has many possible solutions. It is a javascript solution so, if that is not allowed, don't worry about the rest of this post beyond the next paragraph. Instead of giving you the answer, I will tell you some things about your example markup:

It has just one table with 4 rows and 5 columns (or 5 data cells per row, however you want to say it), not multiple tables with multiple rows. You misspelled the closing </table> tag so, technically there is no table. Modern browsers will ignore that, at least in your example page, not in a more complex markup.

In light of these facts, I cannot be certain that my solution even fits the problem that you were given.

I'll tell you what, if you want to see what I came up with for your example page:

1 ) Explain to me, in your own words (I'll know if you've just cut and pasted this stuff from somewhere else) what the following javascript methods are:

setAttribute()
getAttribute()
test()
getElementsByTagName()

2 ) Show me a working example of each one and tell me what each does in its example.

[shawn524]

To tell you the truth, I really have very little, or no knowledge about JavaScript. So I had to do a bit of research on the four items.

setAttribute() will define a certain string for a specified object. Like under certain conditions whether or not something is visible or not.

getAttribute() will search for a specific string if it has the same name as something else.

test() checks for a pattern within a string.

and getElementsByTagName() has something to do with children or something like that.
I think.

I’m really not certain on any of these. I’m going to try to come up with examples of my work but I don't know if I can.

Oh, and this is not like a problem we were assigned to figure out. This is just a free standing assignment. We were instructed to just create a website using some advanced elements.

[jscheuer1]

The examples don't need to be your own, just tell me what each method is doing in its example.

Some clues:

Both setAttribute() and getAttribute() deal with an element's attributes, setting and reading a specified attribute, respectively. An element can be something like a table or a paragraph, for example in:

<p align="center">Some Text Here</p>

We have a paragraph element with one attribute (align) and its current setting, as written, is "center". Other common attributes for block level elements are width and height. Depending upon what type of element it is, bgcolor and border can be attributes. So, we can have a table tag with all these attributes:

<table width="65%" height="500" align="center" bgcolor="#000080" border="0">

In the above, the table element has all these attributes as well, the tag is the element, for all intents and purposes.

getElementsByTagName() has to do with those tag names, it collects all elements on a page that have a specified tag name, making them available to be acted upon in a script. It is like its cousin getElementById(), only it selects a range of elements whereas getElementById() can only select a single element.

You got the definition for test() close enough but, it looks like it could have been copied from the web, the way you worded it. OK, enough on defining these things, find me one example of each of these methods (they don't have to be your own) and tell me what each method is doing in its example.

[shawn524]

Ok, i found an example for setAttribute() and getAttribure(). In this example there is a text entry field and three buttons that corespond to the three elements (there is removeAttribute here too.) I think the easiest way to sum this up is that it works like a calculators M+, MR, and MC buttons. You enter something and hit Set Attribute to save the value, Get Attribure to recall it, and Remove attribute to delete it. Right?

<HEAD>

<STYLE>
   .userData {behavior:url(#default#userdata);}
</STYLE>   

<SCRIPT>
   function fnGet(){
      oPersistInput.load("oDataStore");
      oPersistInput.value=oPersistInput.getAttribute("sPersistAttr");
   }
   function fnSet(){
      oPersistInput.setAttribute("sPersistAttr",oPersistInput.value);
      oPersistInput.save("oDataStore");
   }
   function fnRem(){
      oPersistInput.removeAttribute("sPersistAttr");
      oPersistInput.save("oDataStore");
   }
</SCRIPT>
</HEAD>

<BODY >
<INPUT type=text class=userData id=oPersistInput> 
<INPUT type=button value="Get Attribute" onclick="fnGet()">
<INPUT type=button value="Set Attribute" onclick="fnSet()">
<INPUT type=button value="Remove Attribute" onclick="fnRem()">
</BODY>

[shawn524]

I also found an example for test() but im not shure how to explain it.

function TestDemo(re, s){
   var s1;                         //Declare variable.
   // Test string for existence of regular expression.
   if (re.test(s))                 //Test for existence.
      s1 = " contains ";           //s contains pattern.
   else
      s1 = " does not contain ";   //s does not contain pattern.
   return("'" + s + "'" + s1 + "'"+ re.source + "'"); //Return string.
}

[shawn524]

Again not sure how to explain what is going on in this example for getElementsByTagName(). but here it is anyways.

<SCRIPT>
function fnGetTags(){
   var oWorkItem=event.srcElement;
   var aReturn=oWorkItem.parentElement.getElementsByTagName("LI");
   alert("Length: "
      + aReturn.length
      + "\nFirst Item: "
      + aReturn[0].childNodes[0].nodeValue);
}
</SCRIPT>
<UL onclick="fnGetTags()">
<LI>Item 1
   <UL>
      <LI>Sub Item 1.1
      <OL>
         <LI>Super Sub Item 1.1
         <LI>Super Sub Item 1.2
      </OL>
      <LI>Sub Item 1.2
      <LI>Sub Item 1.3
   </UL>		
<LI>Item 2
   <UL>
      <LI>Sub Item 2.1
      <LI>Sub Item 2.3
   </UL>
<LI>Item 3
</UL>

[jscheuer1]

OK, this has gone on long enough. I really wish the folks at Microsoft would give less complicated examples of this stuff. Hopefully, now I will. Here is the script that I made up. The green comments should help explain things and can reamain in the code as long as the //'s remain as well. It goes in the head section of the page:

<html>
<head>
<title>index</title>
<script type="text/javascript">
function initCells(){
var switcher = function(){ // defines 'switcher' as:
// a test to see if the bgcolor is either navy or #000080 (navy's hex equivalent)
//and set the new color to silver (#c0c0c0) if it is or navy (#000080) if it isn't:
var newColor = /navy|#000080/.test(this.getAttribute('bgcolor', 0)) ? '#c0c0c0' : '#000080'  
this.setAttribute('bgcolor', newColor, 0)  // and set the bgcolor attribute to it
}
var cells = document.getElementsByTagName('td') // collects all td's on the page
for (var i_tem = 0; i_tem < cells.length; i_tem++)  // for each one
cells[i_tem].onclick = switcher;  // assigns the onclick event switcher()
}

onload = initCells;  // gets the whole thing rolling after the browser has loaded
//the page so we can see where everything is before proceeding
</script>
</head>
<body>

[shawn524]

Thank you so much. I had gotten it to change color but not to change back. But really thanks again.