一种实用的表格行鼠标点击高亮效果

偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效)

<script  type="text/javascript">
var highlightcolor='#E0F2FE';
var clickcolor='#ffedd2';

function  MouseOver(){
    
var source=event.srcElement;        
    
if  (source.tagName=="TD"){        
        source
=source.parentElement;
        
var cells  =  source.children;    
        
if  (cells[0].style.backgroundColor!=highlightcolor&&cells[0].style.backgroundColor!=clickcolor)
            
for(i=0;i<cells.length;i++){
                cells[i].style.backgroundColor
=highlightcolor;
            }
        
    }

}


function  MouseOut(){    
    
var source=event.srcElement;
    
if  (source.tagName=="TD"){    
        source
=source.parentElement;
        
var cells  =  source.children;    
        
if  (cells[0].style.backgroundColor!=clickcolor)    
            
for(i=0;i<cells.length;i++){
                cells[i].style.backgroundColor
="";
            }
        
    }

}


function  MouseClick(){
    
var source=event.srcElement;
    
if  (source.tagName=="TD"){    
        source
=source.parentElement;
        
var cells  =  source.children;
        
if  (cells[0].style.backgroundColor!=clickcolor)
            
for(i=0;i<cells.length;i++)
                cells[i].style.backgroundColor
=clickcolor;            
        
else
            
for(i=0;i<cells.length;i++)
                cells[i].style.backgroundColor
="";    
    }

}

</script>

<table onmouseover="MouseOver()" onclick="MouseClick()"  onmouseout="MouseOut()" cellspacing="0" bordercolordark="#ffffff"  bordercolorlight="#cccccc"  border="1" width="80%" align="center" style="cursor:pointer">  
    
<tr>
      
<td>1</td>
      
<td>a</td>
      
<td>b</td>     
    
</tr>
    
<tr>
      
<td>2</td>
      
<td>c</td>
      
<td>d</td>     
    
</tr>
    
<tr>
      
<td>3</td>
      
<td>e</td>
      
<td></td>     
    
</tr>  
    
<tr>
      
<td>4</td>
      
<td>g</td>
      
<td></td>     
    
</tr>  
</table>

posted @ 2008-01-05 16:02  菩提树下的杨过  阅读(891)  评论(0编辑  收藏  举报