making buttons stay clicked with javascript

situation:

I have a page with an active iframe.  I need to change the content based on button clicks.  No big deal.  Using CSS to change the active state of the button so the clicked button stays clicked is on option, but once the user clicks into the iframe, the active state goes away.

I have found a javascript snippet that works well for changing a tables row background when a button in that row is click (and alternatively changes the other table rows back to original background color.)  Exactly what I need, only for columns instead of rows.  I am trying to convert this and have it almost working, but it does not change the alternate columns back to their original background color.

My question is specifically about fixing this script so that only the column in which the button is clicked, has the red background while the others change back to their original background.

Thank you

<table width="501" border="1" cellpadding="0" cellspacing="0" id="tablename">
  <tbody>
    <tr>
      <td width="50" height="60	" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
    </tr>
  </tbody>
</table>
<script type="text/javascript" >

function addBackgroundColorChange(table, backgroundColor) {
	table = table.getElementsByTagName("tbody")[0];
	
	var rows = table.getElementsByTagName("td");
	
	document.write(rows.length);//mine for output
	
	function changeColor(e) {
		if(!e) e = window.event;
		var o = e.target? e.target: e.srcElement;
		
		while(o.tagName && o.tagName.toLowerCase()!="td") o = o.parentNode;
		for(var i=0, n=rows.length; i<n; ++i) {
			if(!rows[i].initialBackgroundColor) rows[i].initialBackgroundColor = rows[i].style.backgroundColor;
			rows[i].style.backgroundColor = rows[i].initialBackgroundColor;
			if(rows[i]==o) rows[i].style.backgroundColor = backgroundColor;
			}
		}
	if(document.addEventListener) table.addEventListener("click", changeColor, false);
	else table.attachEvent("onclick", changeColor);
	}

addBackgroundColorChange(document.getElementById("tablename"), "f00");

</script><iframe id='x' width=500 height=500 >click in iframe should keep active button active</iframe>
 

Open in new window

ZipbangAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,

here we go:
<script type="text/javascript" >
var rows = null;
var highLightColor = "";

function addBackgroundColorChange(table, backgroundColor) {
	table = table.getElementsByTagName("tbody")[0];
	rows = table.getElementsByTagName("td");
	document.write(rows.length);//mine for output
	highLightColor = backgroundColor;
	if (document.addEventListener) 
	{
		table.addEventListener("click", changeColor, false);
	}
	else 
	{
		table.attachEvent("onclick", changeColor);
	}
}
	
function changeColor(e) {
	if (!e) e = window.event;

	var o = e.target ? e.target: e.srcElement;
		
	while (o.tagName && o.tagName.toLowerCase()!="td") 
	{
		o = o.parentNode;
	}
	
	for(var i=0, n=rows.length; i<n; ++i) {
		if (!rows[i].initialBackgroundColor && rows[i].initialBackgroundColor != "") {
			rows[i].initialBackgroundColor = rows[i].style.backgroundColor;
		}
			
		rows[i].style.backgroundColor = rows[i].initialBackgroundColor;
		
		if (rows[i]==o) {
			rows[i].style.backgroundColor = highLightColor;
		}
	}
}

addBackgroundColorChange(document.getElementById("tablename"), "#f00");

</script>

Open in new window


1. I did move the ChangeColor function outside of the main function - you might also keep it as you have it
2. The main changes:
- The color must be a valid code hence instead of "f00" you have to pass "#f00".
- I add a second check to the first IF statement in the for loop:
   && rows[ i ].initialBackgroundColor != ""
  The custom property initialBackgroundColor should only be set if it is not empty

HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ZipbangAuthor Commented:
Thanks!  You saved me a ton of time and I appreciate your effort!!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.