奇偶行高亮顯示及鼠標劃過高亮顯示類

2019-11-21 00:23:29

字體：大中小

來源：轉載

供稿：網友

花了點時間,封裝成了一個類(附帶一個添加樣式的類),適合初學者,直接調用函數即可,無需改代碼.
核心JavaScript代碼:

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>奇或偶數行高亮顯示及鼠標劃過高亮顯示類~@Mr.Think</title> <style> body{font-size:0.8em;letter-spacing:1px;font-family:"微軟雅黑"; line-height:1.8em} h1{font-size:1em; font-weight:normal;} h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} h1 a:hover{background:#eee; text-decoration:underline} table#itab{border:1px solid #999; width:80%; margin:0 auto; border-collapse:collapse} table#itab td{border:1px solid #ccc; text-align:center;} table#itab caption{font-size:1em; font-weight:normal; color:#a40000; margin-top:20px;} .gray{background:#eee;cursor:pointer} .red{background:#a40000; color:#fff; cursor:pointer} .highol{background:#ccf;cursor:pointer} ol#olid{width:80%; margin:1em auto; padding:0} ol#olid li{list-style:inside decimal;text-indent:5px;line-height:2.2em;} ol#olid em{color:#a40000;} </style> </head> <body> <script> //@Mr.Think---公用加載類 function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } //@Mr.Think---附加樣式的類 function addClass(elem,value){ if(!elem.className){ elem.className=value; }else{ var newClass=elem.className; newClass+=" "; newClass+=value; elem.className=newClass; } } //@Mr.Think---奇或偶數行高亮顯示及鼠標劃過高亮顯示 function highLight(elemid,tagName,tagNameHighClass,crossTagNameClass){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementById(elemid)) return false; var elemid=document.getElementById(elemid); tagNames=elemid.getElementsByTagName(tagName); //奇數行高亮顯示 var odd=true;//它的值決定是奇數高亮顯示還是偶數高亮顯示 for(var i=0; i<tagNames.length; i++){ if(odd==true){ addClass(tagNames[i],tagNameHighClass) odd=false; }else{ odd=true; } } for(var m=0; m<tagNames.length; m++){ tagNames[m].oldClassName=tagNames[m].className; tagNames[m].onmouseover=function(){ addClass(this,crossTagNameClass); } tagNames[m].onmouseout=function(){ this.className=this.oldClassName; } } } function highLightItab(){ highLight("itab","tr","gray","red"); highLight("olid","li","gray","highol"); } addLoadEvent(highLightItab); </script> <h1><a >Mr.Think的個人博客</a>@專注前端技術,熱愛PHP,崇尚簡單生活.</h1> <table id="itab"> <caption>我是高亮奇數行及鼠標劃過高亮顯示效果,Uh Oh!</caption> <tr><td>1</td><td>A</td><td>C</td><td>D</td><td>Y</td></tr> <tr><td>2</td><td>B</td><td>S</td><td>A</td><td>E</td></tr> <tr><td>3</td><td>H</td><td>I</td><td>F</td><td>J</td></tr> <tr><td>4</td><td>A</td><td>G</td><td>A</td><td>N</td></tr> <tr><td>5</td><td>Z</td><td>A</td><td>G</td><td>M</td></tr> <tr><td>6</td><td>C</td><td>D</td><td>L</td><td>H</td></tr> <tr><td>7</td><td>D</td><td>W</td><td>G</td><td>S</td></tr> <tr><td>8</td><td>T</td><td>Q</td><td>O</td><td>M</td></tr> </table> <ol id="olid"> <li>可以通過改變<em>var odd=true;</em>的值來確定是高亮顯示奇數行還是偶數行;</li> <li>DOM編程,兼容主流瀏覽器,可擴展性強;</li> <li>適應于表格,列表,div等;</li> <li><em>elemid</em>:事件ID,就是你想實現這種效果所在ID;</li> <li><em>tagName</em>:事件tagName值,比如li,tr,p等等;</li> <li><em>tagNameHighClass</em>:奇或偶數行高亮顯示的樣式;</li> <li><em>crossTagNameClass<em>:鼠標劃過時高亮顯示的樣式.</li> </ol> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

參數說明:

1.elemid:事件ID,就是你想實現這種效果所在ID;
2.tagName:事件tagName值,比如li,tr,p等等;
3.tagNameHighClass:奇或偶數行高亮顯示的樣式;
4.crossTagNameClass:鼠標劃過時高亮顯示的樣式.

使用說明:

1.如果你只想要其中一個效果,在類中,刪除對應的不需要的代碼,有注釋;
2.調用(加載函數建議用本文中的加載函數,用window.onload非明智之舉):

復制代碼代碼如下:

 
window.onload=function highYourElem(){ 
highLight("yourId","yourTagName","yourHighClass","yourCrossClass"); 
} 

上一篇：JQuery從頭學起第一講

下一篇：js彈窗代碼可以指定彈出間隔

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

榮耀總裁趙明烏鎮演講：榮耀首款5G手機V30下月發布

2019-10-23 09:17:05

搜狐張朝陽：回歸媒體是搜狐重新崛起的關鍵

2019-10-21 09:20:02

華為輪值董事長郭平：虛擬技術創造現實價值

2019-10-21 09:00:12

滴滴英文服務上線兩周年用戶已超200萬

2019-09-26 08:57:12

華為推出全球至快AI訓練集群Atlas900

2019-09-25 08:46:36

馬斯克：特斯拉正組建中國技術團隊

2019-09-25 08:15:43

疑難解答

圖片精選

網友關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

奇偶行高亮顯示及鼠標劃過高亮顯示類