Solved

Change table cell color onClick

Posted on 2001-08-15
6
225 Views
Last Modified: 2008-02-01
I am trying to come up with a script that would change the color of a <TD> tag on click.. Has anyone ever done that before...thanks!
0
Comment
Question by:slimbx
[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
6 Comments
 
LVL 4

Expert Comment

by:Gibble
ID: 6389830
<table>
<tr>
<td id="changeme" bgcolor="blue">sometext</td>
<td><span onClick="document.all('changeme').style.background = 'red'">click here</span></td>
</tr>
</table>
0
 
LVL 4

Expert Comment

by:Gibble
ID: 6389847
btw, I am not sure about NS support for this, I don't have a copy of NS nor do I ever use it so :-/
0
 

Author Comment

by:slimbx
ID: 6389965
NS support is a must for this as well. Sorry I did not specify that. I know that there are some querks, but if you can get it as close as you can, I am leniant.

slimbx
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Accepted Solution

by:
nzjonboy earned 45 total points
ID: 6390774
this link may give you some information on how its done. if you need more help with this then I'll post a script

http://developer.irt.org/script/1441.htm

nzjonboy
0
 
LVL 2

Expert Comment

by:damienm
ID: 6391879
The below code changes the color of a cell on mouseover and back on mouseout.

<HTML>
<HEAD>
<SCRIPT>
var highColor = 'lime'
function tdMouseOver (evt) {
   this.cell.bgColor = highColor;
}
function tdMouseOut (evt) {
   this.cell.bgColor = document.bgColor;
}
function init () {
  initTableEventHandler ('table1', 3, 3, 'mouseover', tdMouseOver);
  initTableEventHandler ('table1', 3, 3, 'mouseout', tdMouseOut);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
<TABLE BORDER="1">
<TR>
<TD ID="table1Cell0_0" CLASS="cell"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
Kibology
</TD>
<TD ID="table1Cell0_1" CLASS="cell"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
for
</TD>
<TD ID="table1Cell0_2" CLASS="cell"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
all
</TD>
</TR>
<TR>
<TD ID="table1Cell1_0" CLASS="cell"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
Kibology
</TD>
<TD ID="table1Cell1_1" CLASS="cell"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
for
</TD>
<TD ID="table1Cell1_2" CLASS="cell"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
all
</TD>
</TR>
<TR>
<TD ID="table1Cell2_0" CLASS="cell" VALIGN="top"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
Scriptology
</TD>
<TD ID="table1Cell2_1" CLASS="cell" VALIGN="top"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
for
</TD>
<TD ID="table1Cell2_2" CLASS="cell"
    ONMOUSEOVER="this.bgColor = highColor;"
    ONMOUSEOUT="this.bgColor = document.bgColor;"
>
all.
<BR>
All for Scriptology
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
0
 

Author Comment

by:slimbx
ID: 6392899
This will do just fine. I am using a jsp page to implement something that will require clicking on table cells and changing colors. I will be hooking into some data source, to provide colors to change to. Thanks a lot for your help. I 've aded a few for your troubles. Thanks

slimbx
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

742 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