Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

HighLight Or change Table td bgColor at Runtime 1

Status
Not open for further replies.
Guest_imported

Guest_imported

New member
Jan 1, 1970
0
I have beeen raking my brain and books for this one, but I'm sure I am missing something easy. I just need to change the background of a table data tag when the user clicks something. I have tired TDIdName.bgcolor = "red" and window.TDIdName.bgcolor= "red" and TDIdName.style.backgroundColor = "red" all to no success. Worse part is that I get no error. It just will not change the background color.
Any Ideas?
Thanks,
kibb
 
Sort by date Sort by votes
Yes, I need something similar. I would like the cells of my table to change color onmouseover/onmouseout. Is this possible w/ Javascript and without using graphics?
 
Upvote 0 Downvote
<td onMouseOver=&quot;this.bgColor='blue'&quot; onMouseOut=&quot;this.bgColor='white'&quot;> that changes the bgcolor to blue on mouseover and to white on mouse out.

hope it helps! Suceess, thats the way you spell success!
Got a question? Ask IMOZRMY!
 
Upvote 0 Downvote
I cant get that javascript to work; did you try it?
 
Upvote 0 Downvote
Wait a minute; it does work if I don't apply my style sheet. Is there a way to get these to work together?
 
Upvote 0 Downvote
Did some digging from MS Hotmail inbox, which has the feature I wanted, and found the solution. I have tested this with IE 6 and Netscape 6 and both work fine, but if I remember corectly older versions of netscape have difficulty working with &quot;div&quot; tags.

First the head section style sheet with the color you would like the backgroung to be:
<style type=&quot;text/css&quot;>
TR.H {BACKGROUND-COLOR: #F3F2EB}
</style>

Then You put in the function. I have it set so that when you click another data tag it is the only one highlighted, and when you click a highlighted cell again it de-highlights. To have it keep highlighting just take out the entire &quot;if&quot; statement and put in &quot;lol.className = &quot;H&quot;&quot;.

<script language=&quot;Javascript&quot;>
Starter = false;

function doStuff(lol){

while(lol.tagName!=&quot;TR&quot;){
lol=lol.parentNode;
}

if(Starter == false){
Starter = true;
GlobalObj = lol;
GlobalObj.className = &quot;H&quot;;
}else if(lol.className == &quot;H&quot;){
lol.className = &quot;&quot;;
}else{
GlobalObj.className = &quot;&quot;;
GlobalObj = lol;
GlobalObj.className = &quot;H&quot;;
}
}
</script>

Then you simple wrap your the CONTENTS of your table data tag in a &quot;div&quot; tag. I have used the onclick event, but you can use ondblClick and onmouseOver events as well.

<table>
<tr>
<td>
<div onclick=&quot;javascript:doStuff(this);&quot;>
Click TD One To Highlight!
</div>
</td>
</tr>
<tr>
<td>
<div onclick=&quot;javascript:doStuff(this);&quot;>
Click TD Two To Highlight!
</div>
</td>
</tr>
</table>



Let me know if you have any problems or would like it customized.

kibboy
 
Upvote 0 Downvote
Yes, we're getting closer...
Can you make it so the color change occurs onMouseOver and OnMouseOut? Also, that script changes the entire table row, but I want to change individual cells in the same row.
The following code does what I want:

<HTML>
<BODY>
<table width=100% border=1 cellspacing=0>
<tr>
<td onmouseover=&quot;javascript:this.bgColor='red'&quot; onmouseout=&quot;javascript:this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;javascript:this.bgColor='red'&quot; onmouseout=&quot;javascript:this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;javascript:this.bgColor='red'&quot; onmouseout=&quot;javascript:this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;javascript:this.bgColor='red'&quot; onmouseout=&quot;javascript:this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;javascript:this.bgColor='red'&quot; onmouseout=&quot;javascript:this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;javascript:this.bgColor='red'&quot; onmouseout=&quot;javascript:this.bgColor='white'&quot;>hhhhhhhhh</td>
</tr>
</table>
</BODY>
</HTML>

But, if I apply a style to set the original background color of the cells, it no longer works. This brings up another good question though, how do I tell javascript the original and highlighted colors that are defined in the style sheet?
 
Upvote 0 Downvote
In the expression :

onmouseover=&quot;javascript:this.bgColor='red'&quot;

the javascript protocol is not needed.

The only time we need to use the javascript pseudo-protocol is when the attribute we are adding javascript to is href in the anchor tag.

<a href=&quot;javascript:myFunction()&quot; onClick=&quot;myOtherFunction()&quot;>

So you could reformat your table this way :

<table width=100% border=1 cellspacing=0>
<tr>
<td onmouseover=&quot;this.bgColor='red'&quot; onmouseout=&quot;this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;this.bgColor='red'&quot; onmouseout=&quot;this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;this.bgColor='red'&quot; onmouseout=&quot;this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;this.bgColor='red'&quot; onmouseout=&quot;this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;this.bgColor='red'&quot; onmouseout=&quot;this.bgColor='white'&quot;>hhhhhhhhh</td>
<td onmouseover=&quot;this.bgColor='red'&quot; onmouseout=&quot;this.bgColor='white'&quot;>hhhhhhhhh</td>
</tr>
</table>

Hope this helps. Gary Haran
 
Upvote 0 Downvote
umm, lol, thats what I had said in the first place. Suceess, thats the way you spell success!
Got a question? Ask IMOZRMY!
 
Upvote 0 Downvote
Yeah, but it still doesn't work when a style is applied to the cell. Am I sol?


Why can't the CSS 'hover' feature apply to more tags than just the 'a'?!?!? :mad:
 
Upvote 0 Downvote
OK here it is:
Code: 
<HTML>
<HEAD>
<style>
td{
	font-family:Verdana;
	font-size:12 px;
	text-align:center;
	border:solid black 1px;
}
.change A:hover
{
    COLOR: white;
    BACKGROUND-COLOR: red;
}
.change A
{
    WIDTH: 100%;
    COLOR: red;
    BACKGROUND-COLOR: white;
    text-decoration:none;
    padding:3px;
}
</STYLE>
</HEAD>
<BODY>
<table width=100% cellspacing=5 cellpadding=0>
<tr>
	<td class=&quot;change&quot;><a href=&quot;#&quot;>Link 1</a></td>
	<td class=&quot;change&quot;><a href=&quot;#&quot;>Link 2</a></td>
	<td class=&quot;change&quot;><a href=&quot;#&quot;>Link 3</a></td>
	<td class=&quot;change&quot;><a href=&quot;#&quot;>Link 4</a></td>
	<td class=&quot;change&quot;><a href=&quot;#&quot;>Link 5</a></td>
	<td class=&quot;change&quot;><a href=&quot;#&quot;>Link 6</a></td>
</tr>
</table>
</BODY>
</HTML>


Clean and simple; and no javascript!
 
Upvote 0 Downvote
I have the answer! :^D

<SCRIPT LANGUAGE=&quot;Javascript&quot;><!--
function doSomething (tester) {

tester.style.lastBackgroundColor = tester.style.backgroundColor;
tester.style.backgroundColor = 'red';
}

function doNothing (tester) {

tester.style.backgroundColor = tester.style.lastBackgroundColor;
}
-->
</SCRIPT>

<TABLE>
<TR>
<TD STYLE=&quot;background-color: blue&quot; onMouseOver=&quot;doSomething(this);&quot; onMouseOut=&quot;doNothing(this);&quot;>If you move your mouse over this it will turn red, then purple when you move your mouse out!</TD>
</TR>
</TABLE>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
548
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
577
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
510
coldbohemia
coldbohemia
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
411
berkshirea
berkshirea
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
996
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top