继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

ABOUTYOU
关注TA
已关注
手记 477
粉丝 67
获赞 359

偶尔在看天天基金网净值公告时,从源代码里剥下的一段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>f </td>     
    </tr>  
    <tr>
      <td>4</td>
      <td>g</td>
      <td>h </td>     
    </tr>  
</table>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP