document.observe('dom:loaded', function() {
var tObjs = document.getElementsByTagName('table');
for (var x = 0; x < tObjs.length; x++) {
if(tObjs[x].className.match('highlight')) {
oTrs = tObjs[x].getElementsByTagName('tr');
for (var y = 0; y < oTrs.length; y++) {
oTrs[y].onmouseover = function() { colorRow(this) };
oTrs[y].onmouseout = function() { returnRow(this) };
}
}
}
});
function colorRow(e) {
e.activeElement = $(e);
e.addClassName('on');
}
function returnRow(e) {
e.activeElement = $(e);
e.removeClassName('on');
}
Refactorings
No refactoring yet !
Adam
May 26, 2009, May 26, 2009 15:15, permalink
1 rating.
Login to rate!
document.observe('dom:loaded', function() {
$$('table.highlight tr').each(function(element) {
element.activeElement = element;
element.onmouseover = element.addClassName.curry('on');
element.onmouseout = element.removeClassName.curry('on');
});
});
Danny Peck
May 26, 2009, May 26, 2009 15:37, permalink
No rating.
Login to rate!
Ah nice Adam. Thanks. Curious, though, why one would just not do this?
document.observe('dom:loaded', function() {
$$('table.highlight tr').each(function(element) {
element.onmouseover = element.addClassName.curry('on');
element.onmouseout = element.removeClassName.curry('on');
});
});
Adam
May 26, 2009, May 26, 2009 18:30, permalink
No rating.
Login to rate!
I wasn't sure why you were setting activeElement, so I left it in for completeness.
Danny Peck
May 26, 2009, May 26, 2009 19:59, permalink
No rating.
Login to rate!
Cool. thanks again. Yeah sometimes IE freaks out if you don't set activeElement for reasons I'm not sure of.
NTulip
July 24, 2009, July 24, 2009 15:39, permalink
No rating.
Login to rate!
any reason why you won't do it with just CSS? Given the example code here.
.your-class {
font-size: 12px;
margin: 0px;
text-align: left;
border-collapse: separate;
border-bottom:none;
}
.your-class th {
font-size: 13px;
font-weight: bold;
padding: 1px;
background: #EFEFEF;
border-top: 1px solid #FFF;
color: #333;
text-align: left;
}
.your-class td {
padding: 1px;
background: none;
border-top: 1px solid #CCC;
color: #666;
border-bottom: none !important;
}
.your-class tr:hover td {
background: #FBFBFB;
color: #333;
}
.your-class tr.footer { background: none !important; }
.your-class tr.footer:hover td { background: none !important; }
A fairly common thing to do. Wondering if there's a more efficient way.