奇偶行高亮显示及鼠标划过高亮显示类 | 学步园

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

奇偶行高亮显示及鼠标划过高亮显示类

2013年06月30日 ⁄ 综合 ⁄ 共 1528字 ⁄ 字号小中大 ⁄ 评论关闭

花了点时间,封装成了一个类(附带一个添加样式的类),适合初学者,直接调用函数即可,无需改代码.
核心JavaScript代码:

<meta charset="gb2312"><br />
<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>
<p><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><br />
<h1><a href="http://mrthink.net/">Mr.Think的个人博客</a><br />
@专注前端技术,热爱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>:鼠标划过时高亮显示的样式.</em></em></li>
</ol>
<p>

返回

【上篇】UML 类图
【下篇】123

作者: puller

该日志由 puller 于11年前发表在综合分类下，最后更新于 2013年06月30日.
转载请注明: 奇偶行高亮显示及鼠标划过高亮显示类 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园保留所有权利.
软文销售 QQ客服：2265327166

点击这里给我发消息

（其他合作也可洽谈）