关于在显示页面鼠标移动整行选中并且鼠标离开还原的解决办法

效果图:

 

附件图片为现实效果，请点击查看。

 

 

<!--EndFragment-->

 两种解决方法：

 

 第一种：在本页面上写一个样式

 

/*****对页面的选中行规定颜色*******/

.thColor{

   background:#92D5FC;

}

/*****然后在所需要调用的TR中写如下代码*******/

<tr
onmouseover="this.className='thColor';" onmouseout="this.className='';"></tr>

 

 第一种：使用js解决

 

var  highlightcolor='#c1ebff';

//此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(

var  clickcolor='#51b2f6';

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="";

}

}

 

在所需要的地方一般是一个table中写调用方法

<table

 width="100%" border="0" cellpadding="0" cellspacing="1"

 bgcolor="#a8c7ce"   onmouseover="changeto()"

  onmouseout="changeback()">

 

这样就可以搞定上面选中的方法了。

<!--EndFragment-->

评论

1 楼 w156445045 2012-12-28  

请问下  火狐下的一段JS报错ReferenceError: event is not defined ,请问怎么解决。  谢谢。