表格的高亮显示 Table's HighLight

最新推荐文章于 2023-01-17 16:29:10 发布

sailflying

最新推荐文章于 2023-01-17 16:29:10 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： DHTML原创文章标签： table javascript border function

本文链接：https://blog.youkuaiyun.com/sailflying/article/details/1770365

DHTML原创专栏收录该内容

3 篇文章

订阅专栏

表格的高亮显示 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 >