Solved

CHANGE COLOR OF TABLE CELL - ONCLICK

Posted on 2003-11-20
8
2,097 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 33

Expert Comment

by:knightEknight
ID: 9788005
doh! too slow!
0
 
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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
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…

738 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