js 奇或偶数行高亮显示及鼠标划过高亮显示
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].onmouseo教程ver = function(){
addclass(this, crosstagnameclass);
}
tagnames[m].onmouseout = function(){
this.classname = this.oldclassname;
}
}
}
完整实例
<style>
table#itab{border:1px solid #999; width:80%; margin:0 auto; border-collaps教程e: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><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><div id="demo">
<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>
</div>