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 wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onmouseover change <TR> with colored <TD>s 1

Status
Not open for further replies.
feshangi

feshangi

MIS
Nov 24, 2004
265
US
I have below <TR>:

Code: 
<tr>
<td bgcolor="Red"></td>
<td bgcolor="Blue"></td>
</tr>

Is it possible to change the <TR> background color onmouseover and onmouseout put the default colors back to <TD>s?

On my actual scenario I have a lot more <TD>s.

Thanks in advanced,

Mike
 
Sort by date Sort by votes
How 'bout this?
Code: 
<script type="text/javascript">
function changeBG(objRow, mouseState)
    {
    if (mouseState == 'on')
        {
        	sColor = '#eeeeee';			
			tColor = '#000000';
    }
    else if (mouseState == 'off')
        {
        	sColor = '#FFFFFF';
			tColor = '#000000';
    }
    objRow.bgColor = sColor;
	objRow.style.color = tColor;
	}
</script>


<tr onMouseOver="changeBG(this, 'on');" onMouseOut="changeBG(this, 'off');">
  <td bgcolor="Red"></td>
  <td bgcolor="Blue"></td>
</tr>
Change 'sColor' and 'tColor' to be whatever colors you want to use.



Hope This Helps!

Ecobb
Beer Consumption Analyst

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
Ecobb, I don't know what to do without you.

As always thanks.

Mike
 
Upvote 0 Downvote
try this too:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">

.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: gray; }
.c4 { background-color: yellow; }
.c5 { background-color: aqua; }

.cellOver { background-color: white; }

</style>

<script language="javascript"><!--

function changeColor(blnOver, rowTarget) {
    var cells = rowTarget.cells;
    for (var i = 0; i < cells.length; i++) {
        cells[i].className = (blnOver) ? "cellOver" : ("c" + (i + 1))
    }
}

--></script>
</head>

<body>

<table><tr onmouseover="changeColor(true, this);" onmouseout="changeColor(false, this);">
<td class="c1">Stuff</td>
<td class="c2">Stuff</td>
<td class="c3">Stuff</td>
<td class="c4">Stuff</td>
<td class="c5">Stuff</td>
</tr><tr onmouseover="changeColor(true, this);" onmouseout="changeColor(false, this);">
<td class="c1">Stuff</td>
<td class="c2">Stuff</td>
<td class="c3">Stuff</td>
<td class="c4">Stuff</td>
<td class="c5">Stuff</td>
</tr><tr onmouseover="changeColor(true, this);" onmouseout="changeColor(false, this);">
<td class="c1">Stuff</td>
<td class="c2">Stuff</td>
<td class="c3">Stuff</td>
<td class="c4">Stuff</td>
<td class="c5">Stuff</td>
</tr></table>

</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Ecobb, I am facing the same problem that I had originally. Whatever code I try won't overwrite the <TD>s color!
 
Upvote 0 Downvote
Thanks cLFlaVA for the code. The problem I have with it is on mouseover it make the fonts bigger. My font is set to 10px but onmouseover the font is changing to something like 12px. Do you know why this is happening?

Thanks,

Mike
 
Upvote 0 Downvote
Add an additional style:

Code: 
<style type="text/css">

[blue]td { font-size: 10px; }[/blue]

.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: gray; }
.c4 { background-color: yellow; }
.c5 { background-color: aqua; }

.cellOver { background-color: white; }

</style>

Make sure you don't have any other overriding styles that might be doing that.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
For the record (and not to confuse), the above style changes can be achieved in most non-IE browsers without any JavaScript. Simply make the style as follows:

Code: 
<style type="text/css">

.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: gray; }
.c4 { background-color: yellow; }
.c5 { background-color: aqua; }

tr:hover td { background-color: white; }

</style>
And then remove all the JavaScript from your page.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Then provide your complete code. No one here is a mindreader.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
From my experience, changing the style of a table row may not necessarily change the style of table cells, especially if the cells have their own style.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Code: 
<tr onmouseover="changeColor(true, this);" onmouseout="changeColor(false, this);">
                            <td width="37" bgcolor="#WorkFlowColumnA#" class="style4"><div align="center">#CustNum#</div></td>
                            <td width="153" bgcolor="#WorkFlowColumnB#" class="style4">#PlanCodeId#</td>
                            <td width="45" bgcolor="#WorkFlowColumnA#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnB#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnA#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnB#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnA#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnB#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnA#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnB#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnA#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnB#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnA#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnB#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnA#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="45" bgcolor="#WorkFlowColumnB#" class="style4"><div align="center">09/09/09</div></td>
                            <td width="70" class="style4">#Left(Note,14)#</td>
                          </tr>
 
Upvote 0 Downvote
tsdragon, have you read any of the posts?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
feshangi, that's nice code, but I'll need to see the style definitions as well. you don't need a <div> in there. if you get rid of the <div> and make your style as follows:

Code: 
<style type="text/css">

td { font-size: 10px; }

.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: gray; }
.c4 { background-color: yellow; }
.c5 { background-color: aqua; }

.cellOver { background-color: white; }

.c1, .c2, .c3, .c4, .c5, .cellOver { text-align: center; }

</style>

Does that fix your problem? Again, if it doesn't, please show ALL your code. The code you showed does not reflect the problem.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
cLFlaVA,

You were right. I had other styles overriding your codes.

This is what was causing it:

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

Now it's exactly how I wannted. You are a mindreader :)

Thanks,

Mike
 
Upvote 0 Downvote
no prob.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Hey, that's pretty slick! I wish I knew enough css to come up with stuff like that! :)



Hope This Helps!

Ecobb
Beer Consumption Analyst

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
cLFlaVA: of course I've read the other posts! Is there some reason you asked?


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Because none of my posts talk about changing the color of <tr>, but rather <td>.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
From the original question:
Is it possible to change the <TR> background color onmouseover and onmouseout put the default colors back to <TD>s?

(emphasis mine)
Click to expand...
That is what I was commenting on.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
985
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
324
Alt255
Alt255
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
1K
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top