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

changing table rows colors on mouse events. 1

Status
Not open for further replies.
lovekang

lovekang

Programmer
Feb 16, 2006
86
KR
Why this onclick function do not clear the other rows? I mean it doesn't whitten other rows.
Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<script>
function onOver(){
if(event.srcElement.style.backgroundColor != '#cccccc'){
event.srcElement.style.backgroundColor = '#CCEED6';
}
}
function onOut(){
if(event.srcElement.style.backgroundColor != '#cccccc'){
event.srcElement.style.backgroundColor = '#ffffff';
}
}
function onClick(){
var row_cnt = parseInt(document.all.row_cnt.value);
for(j=0;j<row_cnt;j++){
document.getElementById("tr_"+j).style.backgroundColor = '#ffffff';
}
event.srcElement.style.backgroundColor = '#cccccc';
}
</script>
</head>
<body>
<table width="300" border="1">
<input type="text" name="row_cnt" value="5"/>
<tr id="tr_0" onmouseover="onOver()" onmouseout="onOut()" onclick="onClick()"><td>0</td></tr>
<tr id="tr_1" onmouseover="onOver()" onmouseout="onOut()" onclick="onClick()"><td>1</td></tr>
<tr id="tr_2" onmouseover="onOver()" onmouseout="onOut()" onclick="onClick()"><td>2</td></tr>
<tr id="tr_3" onmouseover="onOver()" onmouseout="onOut()" onclick="onClick()"><td>3</td></tr>
<tr id="tr_4" onmouseover="onOver()" onmouseout="onOut()" onclick="onClick()"><td>4</td></tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
- Ditch the input - you can't have any elements like that inside a table, but outside of a td.
- Stop using IE-only code. It's so easy to make these things cross-browser - in this case, by passing "this" through
- Specify a type for your script.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
	<script type="text/javascript">
		function onOver(row) {
			if (row.style.backgroundColor != '#CCCCCC') row.style.backgroundColor = '#CCEED6';
		}

		function onOut(row) {
			if (row.style.backgroundColor != '#CCCCCC') row.style.backgroundColor = '#FFFFFF';
		}

		function onClick(row) {
			var row_cnt = document.getElementById('theTable').rows.length;
			for (var loop=0; loop<row_cnt; loop++) {
				document.getElementById('tr_' + loop).style.backgroundColor = '#FFFFFF';
			}
			row.style.backgroundColor = '#CCCCCC';
		}
	</script>
</head>
<body>
	<table id="theTable" width="300" border="1">
		<tr id="tr_0" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>0</td></tr>
		<tr id="tr_1" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>1</td></tr>
		<tr id="tr_2" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>2</td></tr>
		<tr id="tr_3" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>3</td></tr>
		<tr id="tr_4" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>4</td></tr>
	</table>
</body>
</html>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thank you.
and is your rgb code supposed to be lower-case?
 
Upvote 0 Downvote
Yes it will. I've been using uppercase for my colour values since IE4 - so that's IE 4, IE 5, IE 5.5, IE 6, and now IE 7 - and they work just fine.

And even your original script contained some uppercase colour values. Maybe you have something else wrong?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
your code above works different from when I chaged to uppercases.

when I click
if lower-case -> gray color is there until you click other rows.
if upper-case - gray color changes right after mouse out.

aren't they?
 
Upvote 0 Downvote
Aaah OK - you implied the colours were not being set... butt you're talking about the "getting" of colours, not the setting. Setting the colour works as I said using uppercase.

For the getting, you really don't want to be checking hex values anyway - as some browsers will return RGB codes (Firefox, for example)... so you should use a different mechanism for this (such as classname, etc)... something like this, which works in both IE and Firefox:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
	<style type="text/css">
		.selected {
			background-color: #cccccc;
		}
		.hovered {
			background-color: #cceed6;
		}
	</style>
    <script type="text/javascript">
        function onOver(row) {
        	if (row.className != 'selected') row.className = 'hovered';
        }

        function onOut(row) {
        	if (row.className != 'selected') row.className = '';
        }

        function onClick(row) {
            var row_cnt = document.getElementById('theTable').rows.length;
            for (var loop=0; loop<row_cnt; loop++) {
                document.getElementById('tr_' + loop).className = '';
            }
        	row.className = 'selected';
        }
    </script>
</head>
<body>
    <table id="theTable" width="300" border="1">
        <tr id="tr_0" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>0</td></tr>
        <tr id="tr_1" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>1</td></tr>
        <tr id="tr_2" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>2</td></tr>
        <tr id="tr_3" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>3</td></tr>
        <tr id="tr_4" onmouseover="onOver(this);" onmouseout="onOut(this);" onclick="onClick(this);"><td>4</td></tr>
    </table>
</body>
</html>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
252
Daniel K
Daniel K
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
621
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
747
Kennelbloke
Kennelbloke
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
644
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
586
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top