表格的高亮显示 Table's HighLight
演示: http://www.gaofan.com/learn/highlight.html
< TITLE > ..:: Table's HighLight ::.. </ TITLE >
</ HEAD >
< script language ="JavaScript" type ="text/javascript" > ...
<!--
function hl(Type)...{
var highlightcolor = "",textdecoration = "";
if (Type) ...{ highlightcolor = "#FFCCFF"; textdecoration = "#CC99FF"; }
var e = window.event || arguments.callee.caller.arguments[0];
var td = e.srcElement || e.target;
var i=0; var ctd;
while(true)...{
if(td&&td.nodeName=="TD")...{ctd=td;}
i++;
if((td&&td.nodeName =="TR")||i>10)...{break;}
if(td)...{td = td.parentElement||td.parentNode;}
}
if(td&&td.nodeName =="TR")...{
td.style.backgroundColor = highlightcolor;
tb = td.parentElement||td.parentNode;
if(tb&& tb.nodeName=="TBODY")...{
var tr = tb.childNodes[0]; var tds = tr.childNodes;
for(var j=0;j<tds.length;j++)...{
if(tds[j].rowSpan>1)...{tds[j].style.backgroundColor = highlightcolor;}
}
ctd.style.backgroundColor = textdecoration;
return true;
}
}
}
//-->
</ script >
< BODY >
< h2 > Table's HighLight </ h2 >
< h3 > ..:: 车仔 [ 2007-08-31 ] ::.. </ h3 >
< table width ='600px' border ='0' cellpadding ='2' cellspacing ='1' bgColor ='#009900' onmouseover ='hl(true);' onmouseout ='hl(false);' >
< tbody bgColor ='#FFFFCC' >< tr >< td width ='100px' bgColor ='#FFFF00' >< b > 1 Row </ b ></ td >< td > 00 </ td >< td > 01 </ td >< td > 02 </ td >< td > 03 </ td >< td > 04 </ td >< td > 05 </ td >< td > 06 </ td ></ tr ></ tbody >
< tbody bgColor ='#99FF99' >< tr >< td rowspan ='2' bgColor ='#CCFF00' >< b > 2 Rows </ b ></ td >< td > 10 </ td >< td > 11 </ td >< td > 12 </ td >< td rowspan ='2' > 13 </ td >< td > 14 </ td >< td > 15 </ td >< td rowspan ='2' > 16 </ td ></ tr >< tr >< td > 20 </ td > < td > 21 </ td >< td > 22 </ td >< td > 24 </ td >< td > 25 </ td ></ tr ></ tbody >
< tbody bgColor ='#CCFFFF' >< tr >< td rowspan ='3' bgColor ='#3366FF' >< b > 3 Rows </ b ></ td >< td > 30 </ td >< td > 31 </ td >< td rowspan ='3' > 32 </ td >< td > 33 </ td >< td > 34 </ td >< td > 35 </ td >< td rowspan ='3' > 36 </ td ></ tr >< tr >< td > 40 </ td > < td > 41 </ td >< td > 43 </ td >< td > 44 </ td >< td > 45 </ td ></ tr >< tr >< td > 50 </ td > < td > 51 </ td >< td > 53 </ td >< td > 54 </ td >< td > 55 </ td ></ tr ></ tbody >
</ table >
</ BODY >