- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
多种颜色交替的表格行换色效果，Js+Table，实际上不用JS也能实现，就是用CSS+动态语言控制，那么效果当然不如用JS了，可以把服务器压力分担给客户端，而且隔行换色也可以很平均，这款换色是由三种颜色组成，可以适应大部分情况。
<!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>隔行换色</title> <script type="text/javascript"> <!-- / var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"]; 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="375" id="tbColor" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#C0C0C0"> <tr><td height="25">1</td><td height="25">15</td><td height="25">29</td></tr> <tr><td height="25">2</td><td height="25">16</td><td height="25">30</td></tr> <tr><td height="25">3</td><td height="25">17</td><td height="25">31</td></tr> <tr><td height="25">4</td><td height="25">18</td><td height="25">32</td></tr> <tr><td height="25">5</td><td height="25">19</td><td height="25">33</td></tr> <tr><td height="25">6</td><td height="25">20</td><td height="25">34</td></tr> </table> </body> </html>