奇或偶数行高亮显示及鼠标划过高亮显示类
摘要：在现在的Web站点中，奇偶分行高亮及鼠标滑过高亮可以增强数据的显示效果。作者直接封装一个高亮类，使用时直接调用函数就可以达到目的。
奇或偶数行高亮显示及鼠标莫过高亮显示,一个经常用到的效果,也能谷歌到大把的这种效果JS,但好像还没有一个封装成类直接用的.想象自己当初谷歌这个类时,还真没少折腾时间.
花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.
核心JavaScript代码: 点此查看DEMO
1 //@Mr.Think---添加样式的类
2 function addClass(elem,value){
3 if(!elem.className){
4 elem.className=value;
5 }else{
6 var newClass=elem.className;
7 newClass+=" ";
8 newClass+=value;
9 elem.className=newClass;
10 }
11 }
12 //@Mr.Think---奇或偶数行高亮显示及鼠标划过高亮显示
13 function highLight(elemid,tagName,tagNameHighClass,crossTagNameClass){
14 if(!document.getElementsByTagName) return false;
15 if(!document.getElementById) return false;
16 if(!document.getElementById(elemid)) return false;
17 var elemid=document.getElementById(elemid);
18 tagNames=elemid.getElementsByTagName(tagName);
19 //奇数行高亮显示
20 var odd=true;//它的值决定是奇数高亮显示还是偶数高亮显示
21 for(var i=0; i<tagNames.length; i++){
22 if(odd==true){
23 addClass(tagNames[i],tagNameHighClass)
24 odd=false;
25 }else{
26 odd=true;
27 }
28 }
29 //鼠标划过高亮显示
30 for(var m=0; m<tagNames.length; m++){
31 tagNames[m].oldClassName=tagNames[m].className;
32 tagNames[m].onmouseover=function(){
33 addClass(this,crossTagNameClass);
34 }
35 tagNames[m].onmouseout=function(){
36 this.className=this.oldClassName;
37 }
38 }
39 }
参数说明:
1.elemid:事件ID,就是你想实现这种效果所在ID;
2.tagName:事件tagName值,比如li,tr,p等等;
3.tagNameHighClass:奇或偶数行高亮显示的样式;
4.crossTagNameClass:鼠标划过时高亮显示的样式.
使用说明:
1.如果你只想要其中一个效果,在类中,删除对应的不需要的代码,有注释;
2.调用(加载函数建议用本文中的加载函数,用window.onload非明智之举):
1 window.onload=function highYourElem(){
2 highLight("yourId","yourTagName","yourHighClass","yourCrossClass");
3 }
