表格的高亮显示,该如何处理
日期：2014-05-16 浏览次数：20396 次
表格的高亮显示
演示： http://www.gaofan.com/learn/highlight.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<HTML xmlns= "http://www.w3.org/1999/xhtml " >
<HEAD>
<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
演示： http://www.gaofan.com/learn/highlight.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<HTML xmlns= "http://www.w3.org/1999/xhtml " >
<HEAD>
<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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
