Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature may not be available in some browsers.
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>
[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>