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
ice e.


*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
cLFlaVA, how can I add an onclick to this code?

what I would like to do is when user click on this <TR> change the row color until they refresh the page.

Is this possible?

Please advice.

Thanks,

Mike
 
Upvote 0 Downvote
The fun never ends:

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">

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; }

</style>

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

var rowList = "";

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

function alterList(rowId) {
	rowId += ",";
	rowList = (rowList.indexOf(rowId) > -1) ? rowList.replace(rowId, "") : rowList + rowId;
}

--></script>
</head>

<body>

<table><tr id="r1" onclick="alterList(this.id);" 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 id="r2" onclick="alterList(this.id);" 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 id="r3" onclick="alterList(this.id);" 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
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