表格行鼠标事件变色的例子
注:本文收藏自网络(
猪飞飞'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 >
< 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 >