js 奇或偶数行高亮显示及鼠标划过高亮显示

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;
        }
    }
}

完整实例

我是高亮奇数行及鼠标划过高亮显示效果,uh oh!

1	a	c	d	y
2	b	s	a	e
3	h	i	f	j
4	a	g	a	n
5	z	a	g	m
6	c	d	l	h
7	d	w	g	s
8	t	q	o	m

1. 可以通过改变var odd=true;的值来确定是高亮显示奇数行还是偶数行;


2. dom编程,兼容主流浏览器,可扩展性强;


3. 适应于表格,列表,div等;


4. elemid:事件id,就是你想实现这种效果所在id;


5. tagname:事件tagname值,比如li,tr,p等等;


6. tagnamehighclass:奇或偶数行高亮显示的样式;


7. crosstagnameclass:鼠标划过时高亮显示的样式.