Solved

CHANGE COLOR OF TABLE CELL - ONCLICK

Posted on 2003-11-20
8
2,073 Views
Last Modified: 2008-02-01
Hi Experts,

This is probably very simple but I need an answer fast so the points are set at 500.

Can you please tell me how I can change the background color of a table cell by clicking on a link?

basically I have a link in a table cell and when that link is clicked I need the cell to change color and remain the new color until an alternative link is clicked (in the cell next door) when this happens the first cell needs to return to it's original color and the new cell needs to change color.

The color changes need to be permanent (until another link is clicked) i.e. when I click somewhere else on the page (linke a dropdown menu item) I don't want the table cell to return to it's  original color.

I've tried to do this with a ":active" in CSS but the cell returns to i'ts original color whenever I click anywhere else on the page.

Your help would be greatly appreciated.



Thanks,



PJORDANNA
0
Comment
Question by:pjordanna
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 16

Accepted Solution

by:
jaysolomon earned 500 total points
Comment Utility
what about this

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function colorMe(obj,oId){
      var el = document.getElementById(obj);
      var e = document.getElementById(oId);
      if(document.getElementById){
            el.style.backgroundColor = 'red';
            e.style.backgroundColor = 'white';
      }
}
      
// -->
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="one"><a href="#" onclick="colorMe('one','two');return false;">TEST</a></td>
    <td id="two"><a href="#" onclick="colorMe('two','one');return false;">TEST 2</a></td>
  </tr>
</table>
</body>
</html>
0
 
LVL 31

Expert Comment

by:GwynforWeb
Comment Utility
use  <td onClick ='this.bcColor="red" '><td>
0
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
<HTML>
<BODY>
<TABLE border="2" width="50%">
 <TR>
  <TD id="cell1" style="background=#AAAAAA;">&nbsp;</TD>
  <TD id="cell2" style="background=#AAAAAA;">&nbsp;</TD>
  <TD id="cell3" style="background=#AAAAAA;">&nbsp;</TD>
 </TR>
</TABLE>

<br><A href="#" onclick='document.getElementById("cell2").style.background="#333333";return false;'>change</a>
<br><A href="#" onclick='document.getElementById("cell2").style.background="#AAAAAA";return false;'>back</a>

</body>
</html>

0
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
doh! too slow!
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 31

Expert Comment

by:GwynforWeb
Comment Utility
eg

<table border=1>
<tr><td onclick="this.bgColor='red'">A</td><td onclick="this.bgColor='red'">C</td></tr>
<tr><td onclick="this.bgColor='red'">B</td><td onclick="this.bgColor='red'">D</td></tr>
</table>
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
Gwynn

This will not work unless i misread

because the questioneer wants it permant until a link in another cell is clicked

>>>basically I have a link in a table cell and when that link is clicked I need the cell to change color and remain the new color until an alternative link is clicked (in the cell next door) when this happens the first cell needs to return to it's original color and the new cell needs to change color.
 <<<
0
 

Author Comment

by:pjordanna
Comment Utility
jaysolomon,

That's done it!




PJORDANNA
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
Glad we could help and thanks for the A

Good Luck
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now