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

Change Background Color of TH onMouseOver of TD

Status
Not open for further replies.
sfalin

sfalin

Technical User
Aug 14, 2001
72
0
0
US
Is there some Javascript to change the color of a TABLE TH when the user mouses over a TD in the same column?
 
Sort by date Sort by votes
try this out sfalin:
Code: 
function highlightRow(obj, over) {
   rowObj = obj.parentElement;
   for (i = 0; i < rowObj.childNodes.length; i++) {
      rowObj.childNodes[i].style.color = (over) ? '#ffffff' : '#000000';
      rowObj.childNodes[i].style.backgroundColor = (over) ? '#0000a0' : '#ffffff';
   }
}
</script>
<body>
<table>
<tr>
   <td onmouseover='highlightRow(this, true)' onmouseout='highlightRow(this, false)'>this</td>
   <td onmouseover='highlightRow(this, true)' onmouseout='highlightRow(this, false)'>is</td>
   <td onmouseover='highlightRow(this, true)' onmouseout='highlightRow(this, false)'>a</td>
   <td onmouseover='highlightRow(this, true)' onmouseout='highlightRow(this, false)'>test</td>
</tr>
<tr>
   <td onmouseover='highlightRow(this, true)' onmouseout='highlightRow(this, false)'>to</td>
   <td onmouseover='highlightRow(this, true)' onmouseout='highlightRow(this, false)'>highlight</td>
   <td onmouseover='highlightRow(this, true)' onmouseout='highlightRow(this, false)'>the</td>
   <td onmouseover='highlightRow(this, true)' onmouseout='highlightRow(this, false)'>rows</td>
</tr>
</table>
</body>

-kaht

Weaseling out of things is important to learn. It's what separates us from the animals... except the weasel. - Homer Simpson (no, I'm not Homer)
 
Upvote 0 Downvote
This will highlight the ROW. I need the HEAD (TH) highlighted.
 
Upvote 0 Downvote
I found some code to do exactly what I want and thought I'd share.

I would, however like to not have the onMouseOver and onMouseOut events in every TD, but would like to have some script to perform the same function. Help here would be appreciated.

Some background. This is for Intranet reporting; so, it only needs to work for IE 6.x, but may actually work for other browsers - I don't know. I found a BEHAVIOR (below in code) that allows you to attach the :hover and/or :active Pseudo-Classes to ANY tag, CLASS, or ID. To make it work, I have three files (table.asp, forms.css, and csshover.htc).

Here's the code:
Code: 
[B]table.asp[/B]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<HTML>
<HEAD>
	<TITLE>Table Highlight Sample</TITLE>
	<LINK REL="stylesheet" TYPE="text/css" HREF="/styles/forms.css" MEDIA="screen">
</HEAD>

<BODY>
<TABLE WIDTH=100% STYLE="border: 1px solid black;" ID="hilite" CELLSPACING=0><CAPTION>Table Caption (CAPTION)</CAPTION>
<THEAD><TR>
	<TH ID="COL1">Table Head A (TH)</TH>
	<TH ID="COL2">Table Head B (TH)</TH>
	<TH ID="COL3">Table Head C (TH)</TH>
	<TH ID="COL4">Table Head D (TH)</TH>
	<TH ID="COL5">Table Head E (TH)</TH>
	<TH ID="COL6">Table Head F (TH)</TH>
</TR></THEAD><TBODY><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR><TR>
	<TD onMouseOver="COL1.className='hiliteON'" onMouseOut="COL1.className=''">Table Data A (TD)</TD>
	<TD onMouseOver="COL2.className='hiliteON'" onMouseOut="COL2.className=''">Table Data B (TD)</TD>
	<TD onMouseOver="COL3.className='hiliteON'" onMouseOut="COL3.className=''">Table Data C (TD)</TD>
	<TD onMouseOver="COL4.className='hiliteON'" onMouseOut="COL4.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL5.className='hiliteON'" onMouseOut="COL5.className=''">Table Data D (TD)</TD>
	<TD onMouseOver="COL6.className='hiliteON'" onMouseOut="COL6.className=''">Table Data D (TD)</TD>
</TR></TBODY></TABLE>

</BODY>
</HTML>


[B]forms.css[/B]
BODY {
	font-family: tahoma, verdana, arial;
	font-size: 13px;
	background: #FFFFFF url(/images/bluwave.jpg) repeat-x top left;
	margin-top: 37px;
	margin-bottom: 20px;
	behavior: url("/styles/csshover.htc");
}

TABLE {
	padding: 5px;
}

TABLE CAPTION {
	font-weight: bold;
	font-size: 14px;
	padding: 5px;
}

TR {
	vertical-align: top;
}

#hilite TH.hiliteON {
	background-color: #000066;
	color: #FFFFFF;
}

#hilite TH.hiliteOFF {
	background-color: #FFFFFF;
}

#hilite TR:active {
	background: #99CCFF;
}

#hilite TR:hover {
	background: #DCE9F0;
}

#hilite TD:active {
	background-color: #00AAFF;
	font-weight: bold;
}

#hilite TD:hover {
	background-color: #00AAFF;
}

#hilite TD {
	border-right: 1px solid #000066;
	border-bottom: 1px solid #000066;
}

#hilite TH {
	border-right: 1px solid #000066;
	border-bottom: 1px solid #000066;
}

TH {
	font-weight: bold;
	font-size: 13px;
	padding: 3px;
	vertical-align: top;
}

TD {
	font-size: 13px;
	padding: 3px;
	vertical-align: top;
}


[B]csshover.htc[/B]
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
 *	Pseudos - V1.30.050121 - hover & active
 *	---------------------------------------------
 *	Peterned - [URL unfurl="true"]http://www.xs4all.nl/~peterned/[/URL]
 *	(c) 2005 - Peter Nederlof
 *
 *	Credits  - Arnoud Berendsen 
 *	         - Martin Reurings
 *           - Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	---------------------------------------------
 */

var currentSheet, doc = window.document, activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onactivate', off:'ondeactivate'}
}

function parseStylesheets() {
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
		var affected = select.replace(/:hover.*$/, '');
		var elements = getElementsBySelect(affected);

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	node.attachEvent(events.on,
		function() { node.className += ' ' + className; });
	node.attachEvent(events.off,
		function() { node.className = 
			node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
					classname[1] + '\\b').exec(node.className)))) continue;
				nodes[nodes.length] = node;
			}
		}	return nodes;
	}
</script>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
265
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
181
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
153
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
132
coldbohemia
coldbohemia
CrxC01
  • Locked
  • Question
Sum of All Primes
Replies
0
Views
43
CrxC01
CrxC01

Part and Inventory Search

Sponsor

Back
Top