写了个简洁的隔行变色代码,支持三种动作变化颜色
<!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> 隔行变色 - 中国asp之家</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript"> <!-- //分别是奇数行默认颜色,偶数行颜色,鼠标放上时奇偶行颜色 writed by lastgame at 2008-3-26 13:55:55 var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"]; //从前面iHead行开始变色,直到倒数iEnd行结束 function addTableListener(o,iHead,iEnd) { o.style.cursor = "normal"; iHead = iHead > o.rows.length?0:iHead; iEnd = iEnd > o.rows.length?0:iEnd; for (var i=iHead;i<o.rows.length-iEnd ;i++ ) { o.rows[i].onmouseover = function(){setTrBgColor(this,true)} o.rows[i].onmouseout = function(){setTrBgColor(this,false)} } } function setTrBgColor(oTr,b) { oTr.rowIndex % 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] : oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0]; } window.onload = function(){addTableListener(document.getElementById("tbColor"),0,0);} //--> </script> </head> <body> <table border="1" width="100%" id="tbColor"> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> <tr><td>11</td><td>11</td><td>11</td></tr> </table> </body> </html> [提示:你可先修改部分代码,再按运行]