Solved

CHANGE COLOR OF TABLE CELL - ONCLICK

Posted on 2003-11-20
8
2,075 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
ID: 9787974
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
ID: 9787976
use  <td onClick ='this.bcColor="red" '><td>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 9787996
<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
ID: 9788005
doh! too slow!
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9788032
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
ID: 9788065
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
ID: 9788075
jaysolomon,

That's done it!




PJORDANNA
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9788083
Glad we could help and thanks for the A

Good Luck
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

863 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

20 Experts available now in Live!

Get 1:1 Help Now