表格奇偶行鼠标经过切换颜色函数

Pader 在 2009年4月14日 发表于 网页与编程

自己写的,很简单,用起来也很方便.

JavaScript代码
  1. function hoverTagBgFromId(domId,hoverTag,color){   
  2. /*  
  3.     切换ID内的标签背景颜色,domId:ID,hoverTag:要切换的标签名称,color:切换的颜色[,arguments[3]:偶数行颜色]  
  4.     http://www.vgot.cn by Pader  
  5. */  
  6.     var hoverElemt = document.getElementById(domId).getElementsByTagName(hoverTag);   
  7.     var formerlyColor = new Array();   
  8.     var len = hoverElemt.length;   
  9.     for(var i=0;i<len;i++){   
  10.         if(typeof(arguments[3]) != 'undefined' && i % 2 == 1) {   
  11.             hoverElemt[i].style.backgroundColor = arguments[3];   
  12.         }   
  13.         if(color != '') {   
  14.             hoverElemt[i].onmouseover = function(){   
  15.                 formerlyColor[i] = this.style.backgroundColor;   
  16.                 this.style.backgroundColor = color;   
  17.             }   
  18.             hoverElemt[i].onmouseout = function(){   
  19.                 this.style.backgroundColor = formerlyColor[i];   
  20.             }   
  21.         }   
  22.     }   
  23. }  

使用方法也很简单

XML/HTML代码
  1. <!-- 这是一个表格 -->  
  2. <table>  
  3. <tbody id="hoverbody">  
  4. <tr><td>LINE</td><td>LINE</td></tr>  
  5. <tr><td>LINE</td><td>LINE</td></tr>  
  6. <tr><td>LINE</td><td>LINE</td></tr>  
  7. <tr><td>LINE</td><td>LINE</td></tr>  
  8. </tbody>  
  9. </table>  

把需要切换和更改颜色的行,也就是 TR 们,用一个 TBODY 包括起来,给它一个ID
然后在表格下面,或者 onload 函数里使用
hoverTagBgFromId("hoverbody","tr","#00FF00");
第一个参数就是 TBODY 的 ID,第二个是要切换颜色的TAG,TR就是表格行,第三个是鼠标经过时的颜色.如果想要偶数行的颜色不同,只需指定第四个参数即可
hoverTagBgFromId("hoverbody","tr","#00FF00","#AEC0F4");

评论 共有 0 条评论

暂无评论，快发表你的评论吧。