表格行鼠标事件变色的例子

表格行鼠标事件变色的例子

注：本文收藏自网络（ 猪飞飞's Blog ），文责版权均为原作者所有，本人仅作收藏学习之用。
以下为引用：

做一个表格列表中整行鼠标移动变色的效果,找了一段现成代码再改了一点,加上鼠标点击变色和再点击变回原色的效果.

一个N行N列的表格,实现鼠标移到某行变色,然后点击某一行使之固定一种颜色,再点使之返回原色.原理是使<tr>保持原色,鼠标事件对<tr>下的<td>样式背景色进行改变.同时可以设置避免变色事件的行,主要是针对标题行.相信这段代码对需要做项目比较多的数据列表的朋友有用,我在google和blueidea都找了一遍,没找到完全现成的.

具体请看js代码:

< HTML >
< HEAD >
     < TITLE > 变色表格 </ TITLE >
< style >
.c1 {
    background-color : #fff ;
}
.c2 {
    background-color : #ccc ;
}
#nc {
    background-color : #000 ;
    color : #fff ;
}
</ style >
< script >
var   highlightcolor = ' #333 ' ;
// 此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(
var   clickcolor = ' orange ' ;
function   changeto(){
source = event.srcElement;
if   (source.tagName == " TR " || source.tagName == " TABLE " )
return ;
while (source.tagName != " TD " )
source = source.parentElement;
source = source.parentElement;
cs   =   source.children;
// alert(cs.length);
if   (cs[ 1 ].style.backgroundColor != highlightcolor && source.id != " nc " && cs[ 1 ].style.backgroundColor != clickcolor)
for (i = 0 ;i < cs.length;i ++ ){
    cs[i].style.backgroundColor = highlightcolor;
}
}

function   changeback(){
if   (event.fromElement.contains(event.toElement) || source.contains(event.toElement) || source.id == " nc " )
return
if   (event.toElement != source && cs[ 1 ].style.backgroundColor != clickcolor)
// source.style.backgroundColor=originalcolor
for (i = 0 ;i < cs.length;i ++ ){
    cs[i].style.backgroundColor = "" ;
}
}

function   clickto(){
source = event.srcElement;
if   (source.tagName == " TR " || source.tagName == " TABLE " )
return ;
while (source.tagName != " TD " )
source = source.parentElement;
source = source.parentElement;
cs   =   source.children;
// alert(cs.length);
if   (cs[ 1 ].style.backgroundColor != clickcolor && source.id != " nc " )
for (i = 0 ;i < cs.length;i ++ ){
    cs[i].style.backgroundColor = clickcolor;
}
else
for (i = 0 ;i < cs.length;i ++ ){
    cs[i].style.backgroundColor = "" ;
}
}
</ script >
</ HEAD >
< BODY >
< div   id ='snwcwt' >
     < table   width ="1400"   border ="0"   cellspacing ="1"   cellpadding ="1"   onMouseover ="changeto()"   onMouseout ="changeback()"   onclick ="clickto()" >
         < tr   id ="nc" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     < tr   class ="c1" >   
             < td > dddd </ td >
             < td > kkkk </ td >
             < td > kkkkk </ td >
             < td > kkkkk </ td >
             < td > kkkk </ td >
         </ tr >
         < tr   class ="c2" >   
             < td > kkkk </ td >
             < td > kk </ td >
             < td > k </ td >
             < td > k </ td >
             < td > k </ td >
         </ tr >
     </ table >

</ div >

</ BODY >
</ HTML >