Alter Table Background color Client side

@Closet_RamboApr 05.2006

Helooooo nice people!
Please help me as I am newbish …

I have a table as a menu and I want the table background color to change as the user clicks a link in each table cell sort of like tabs.

Can I do this client side with Javascript ot DHTML ???

to post a comment

JavaScript

25 Comments(s) _↴

@phpnoviceApr 05.2006 — #Give the TABLE tag an [b]id[/b] attribute. Then:

document.getElementById("tableId").style.backgroundColor = "pink";

@Closet_RamboauthorApr 05.2006 — #Here is what I have:

<table border="1" width="100%" id="table3" bgcolor="#808080" bordercolorlight="#000000" bordercolordark="#000000" style="border-collapse: collapse">

<tr>

<td align="center" nowrap><a href="Intro.htm" onclick >Home</a></td>

<td align="center" nowrap><a href="resume.htm">Resume</a></td>

<td align="center" nowrap><a href="work.htm">Work History</a></td>

<td align="center" nowrap><a href="interests.htm">Interests</a></td>

<td align="center" nowrap><a href="picture.htm">Pictures</a></td>

<td align="center" nowrap><a href="contact.htm">Contact Me</a></td>

</tr>

</table>

@Closet_RamboauthorApr 05.2006 — #I want the onclick event to change the background color of that cell to white while the rest remain grey.

Do-able ????

@Closet_RamboauthorApr 05.2006 — #I'm sorry PHP but I don't understand.

@phpnoviceApr 05.2006 — #I want the onclick event to change the background color of that cell to white while the rest remain grey.[/QUOTE]
Oh, you said the table background color. Here is for the current cell:

<i>
 </i>var ele = this.parentNode;
 while(ele.tagName!="TD") {
 ele = ele.parentNode;
 }
 ele.style.backgroundColor = "white";

@Closet_RamboauthorApr 05.2006 — #Now this:

<table border="1" width="100%" id="table3" bgcolor="#808080" bordercolorlight="#000000" bordercolordark="#000000" style="border-collapse: collapse">

<tr>

<td id="home" align="center" nowrap bgcolor="#FFFFFF"><a href="Intro.htm" onclick="active_tab('home')">Home</a></td>

<td id="resume" align="center" nowrap><a href="resume.htm" onclick="active_tab('home')">Resume</a></td>

<td id="work" align="center" nowrap><a href="work.htm" onclick="active_tab('work')">Work History</a></td>

<td id="interests" align="center" nowrap><a href="interests.htm" onclick="active_tab('intersts')">Interests</a></td>

<td id="Pics" align="center" nowrap><a href="picture.htm" onclick="active_tab('Pics')">Pictures</a></td>

<td id="contact" align="center" nowrap><a href="contact.htm" onclick="active_tab('contact')">Contact Me</a></td>

</tr>

</table>

I added id's to each cell and set up a functions to call with a parameter indicating the active menu tab to make bgcolor and this function would set all others to grey.

Now how do I make the function???

@KorApr 05.2006 — #Just this js. No need to change anything on your genuine table.

[code=php]
 <script type="text/javascript">
 var cells;
 function changeC(c){
 for(var i=0;i<cells.length;i++){
 cells[i].style.backgroundColor=(cells[i]==c)?'#ffffff':'';
 }
 }
 onload=function(){
 cells=document.getElementById('table3').getElementsByTagName('td');
 for(var i=0;i<cells.length;i++){
 cells[i].onclick=function(){changeC(this)}
 }
 }
 </script>
 [/code]

@Closet_RamboauthorApr 05.2006 — #I am totally lost here.

Remember I am a newb :eek:

@phpnoviceApr 05.2006 — #Have you taken a [URL=http://www.webreference.com/programming/javascript/diaries/]JavaScript Tutorial[/URL]?

@Closet_RamboauthorApr 05.2006 — #What I mean is that it looks as if that last function will change all cells to white.

I have a table which has one row and 6 cells with hyperlinks in them.

What I want is that all BGcolors be grey except the last cell's hyperlink that was clicked.

@Closet_RamboauthorApr 05.2006 — #maybe a link would help?

http://www.mikienet.com/resume/main.htm

@AltF4Apr 05.2006 — #Take to long

[code=html]<a href="#" onclick="this.parentNode.style.backgroundColor='white'; ">Blah</td>[/code]

@AltF4Apr 05.2006 — #Bad phrasing.

Other ways take to long use mine

<a href="#" onclick="this.parentNode.style.backgroundColor='white'"> 100 </td>

@AltF4Apr 05.2006 — #Sorry, i'm in TX in a rush.

Like THIS

[code=html]<td><a href="#" onclick="this.parentNode.style.backgroundColor='white'>Blah</td>[/code]

@Closet_RamboauthorApr 05.2006 — #That last one works much beter than anything but it doesn't change any other back to grey

@Closet_RamboauthorApr 05.2006 — #? and it only does the link BG color and not the table cell BG Color

@AltF4Apr 05.2006 — #Do what phpnovice said with the IDs.

Just put them on cells.

@AltF4Apr 05.2006 — #To the last post, go to "www.davidlemcoe.com/MCD" and view source.

@Closet_RamboauthorApr 05.2006 — #Saw your web link but it doesn't change back to grey.

Here is what I'm tryin to do.

I have a one row table with 6 columns that I am using as a menu bar targeting a frame's contents.

so for example the first cell of the table has a link called "HOME"

When the visiter clicks "Home" hyperlink in the first table cell I want all other cells backround colors to go back to grey and the "HOME" cell to change to white.

Sorta like tabs in a file folder

@Closet_RamboauthorApr 05.2006 — #see what is hapening here if you like:

www.mikienet.com/resume/main.htm

@Closet_RamboauthorApr 05.2006 — #I changed the HTML to remove the cell background from view and added spaces to the Hyperlink front and back so now I just need to find a way to make all hyperlinks background color to grey and fire the one we're on to white.

Check it out:

www.mikienet.com/resume/main.htm

Any Ideas?

@KorApr 05.2006 — #once again:

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script type="text/javascript">
 var cells;
 function changeC(c){
 for(var i=0;i<cells.length;i++){
 cells[i].style.backgroundColor=(cells[i]==c)?'#ffffff':'';
 }
 }
 onload=function(){
 cells=document.getElementById('table3').getElementsByTagName('td');
 for(var i=0;i<cells.length;i++){
 cells[i].onclick=function(){changeC(this)}
 }
 } 
 </script>
 </head>
 <body>
 <table border="1" width="100%" id="table3" bgcolor="#808080" bordercolorlight="#000000" bordercolordark="#000000" style="border-collapse: collapse">
 <tr>
 <td align="center" nowrap><b><font size="5"><a href="Intro.htm" onclick >Home</a></font></b></td>
 <td align="center" nowrap><b><font size="5"><a href="resume.htm">Resume</a></font></b></td>
 <td align="center" nowrap><b><font size="5"><a href="work.htm">Work History</a></font></b></td>
 <td align="center" nowrap><b><font size="5"><a href="interests.htm">Interests</a></font></b></td>
 <td align="center" nowrap><b><font size="5"><a href="picture.htm">Pictures</a></font></b></td>
 <td align="center" nowrap><b><font size="5"><a href="contact.htm">Contact Me</a></font></b></td>
 </tr>
 </table>
 </body>
 </html>
 [/code]

@Closet_RamboauthorApr 05.2006 — #here is the table HTML:

<table border="1" id="table1" bgcolor="#808080" bordercolorlight="#000000" bordercolordark="#000000" style="border-collapse: collapse" cellpadding="0" cellspacing="0">

<tr>

<td align="center" nowrap><a href="Intro.htm" style="text-decoration: none">   Home    </a></td>

<td align="center" nowrap><a href="resume.htm" style="text-decoration: none">  Resume    </a></td>

<td align="center" nowrap><a href="work.htm" style="text-decoration: none">  Work History    </a></td>

<td align="center" nowrap><a href="interests.htm"style="text-decoration: none">  Interests    </a></td>

<td align="center" nowrap><a href="picture.htm" style="text-decoration: none">  Pictures    </a></td>

<td align="center" nowrap><a href="contact.htm" style="text-decoration: none">  Contact Me    </a></td>

</tr>

</table>

@Closet_RamboauthorApr 05.2006 — #I added your function and changed the table ID to "table1" in both the function and table.

but ...

How will this function ever be called???

@KorApr 05.2006 — #Do you have more tables?

Also in #JavaScript _↴

Acceptance of JavaScript Frameworks for Development of Modern Web Solutions .js file in same directory as HTML file Can't Find Anything Like This

Success!

Help @Closet_Rambo spread the word by sharing this article on Twitter...

Tweet This

Alter Table Background color Client side

25 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Alter Table Background color Client side

25 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

25 Comments(s) _↴

Also in #JavaScript _↴