87,907
社区成员
发帖
与我相关
我的任务
分享表格的高亮显示
演示： 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>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>
</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>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>
</HTML>
...全文
请发表友善的回复…
发表回复
liangpei2008 2007-09-02
- 打赏
- 举报
收藏
xingqiliudehuanghun 2007-09-01
- 打赏
- 举报
对于合并的单元格子的处理值得学习
xingqiliudehuanghun 2007-09-01
- 打赏
- 举报
收藏了,以后可能会用到
LastGame 2007-08-31
- 打赏
- 举报
有值得研究的地方。
