| onmouseover and onmouseout are good but event bubling makes it bad(( |
|
When I wrote this I found that the problem was not related to event bubbling. The trick is... if you assign a style to a TD then it will no longer inherit from the TR. Notice below how 'inherit' is used: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Table Cursor</title>
<meta name='author' content='Mike Foster, Cross-Browser.com'>
<style type='text/css'>
td {
padding:4px;
}
.xtcDefault {
color:#000; background-color:#fff;
}
.xtcSelected {
color:#fff; background-color:#00f;
}
.xtcHover {
color:#00f; background-color:#ccf;
}
.xtcInherit {
color:inherit; background-color:inherit;
}
</style>
<script type='text/javascript'>
var xtc;
window.onload = function()
{
xtc = new xTableCursor('table1', 'xtcInherit', 'xtcDefault', 'xtcHover', 'xtcSelected');
}
window.onunload = function()
{
xtc.unload();
} /* Functions from the X Library, licensed LGPL:
*/ /* xTableCursor - mouseover highlight on rows and cells.
id - table id.
inh - inherit style.
def - default style.
hov - row hover style.
sel - cell selected style.
*/
function xTableCursor(id, inh, def, hov, sel)
{
var tbl = xGetElementById(id);
if (tbl) {
xTableIterate(tbl, init);
}
function init(obj, isRow)
{
if (isRow) {
obj.className = def;
obj.onmouseover = trOver;
obj.onmouseout = trOut;
}
else {
obj.className = inh;
obj.onmouseover = tdOver;
obj.onmouseout = tdOut;
}
}
this.unload = function() { xTableIterate(tbl, done); }
function done(o) { o.onmouseover = o.onmouseout = null; }
function trOver() { this.className = hov; }
function trOut() { this.className = def; }
function tdOver() { this.className = sel; }
function tdOut() { this.className = inh; }
} function xGetElementById(e)
{
if(typeof(e)!='string') return e;
if(document.getElementById) e=document.getElementById(e);
else if(document.all) e=document.all[e];
else e=null;
return e;
}
// documentation is available for this function:
function xTableIterate(sec, fnCallback, data)
{
var r, c;
sec = xGetElementById(sec);
if (!sec ¦¦!fnCallback) { return; }
for (r = 0; r < sec.rows.length; ++r) {
if (false == fnCallback(sec.rows[r], true, r, c, data)) { return; }
for (c = 0; c < sec.rows[r].cells.length; ++c) {
if (false == fnCallback(sec.rows[r].cells[c], false, r, c, data)) { return; }
}
}
}
</script>
</head>
<body> <h1>xTableCursor</h1> <table id='table1'>
<tr><td>t1r1c1</td><td>t1r1c2</td><td>t1r1c3</td><td>t1r1c4</td><td>t1r1c5</td><td>t1r1c6</td><td>t1r1c7</td></tr>
<tr><td>t1r2c1</td><td>t1r2c2</td><td>t1r2c3</td><td>t1r2c4</td><td>t1r2c5</td><td>t1r2c6</td><td>t1r2c7</td></tr>
<tr><td>t1r3c1</td><td>t1r3c2</td><td>t1r3c3</td><td>t1r3c4</td><td>t1r3c5</td><td>t1r3c6</td><td>t1r3c7</td></tr>
<tr><td>t1r4c1</td><td>t1r4c2</td><td>t1r4c3</td><td>t1r4c4</td><td>t1r4c5</td><td>t1r4c6</td><td>t1r4c7</td></tr>
<tr><td>t1r5c1</td><td>t1r5c2</td><td>t1r5c3</td><td>t1r5c4</td><td>t1r5c5</td><td>t1r5c6</td><td>t1r5c7</td></tr>
<tr><td>t1r6c1</td><td>t1r6c2</td><td>t1r6c3</td><td>t1r6c4</td><td>t1r6c5</td><td>t1r6c6</td><td>t1r6c7</td></tr>
</table> </body>
</html>
| 
