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


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

    作者:菩提树下的杨过
    出处:http://yjmyzz.cnblogs.com
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    新概念 Lesson 2 Sorry, sir.
    记一次无法正常本地登陆Linux服务器(确定密码正确)
    English trip -- VC(情景课)5 D
    新概念 Lesson 1 Excuse me!
    English trip -- VC(情景课)5 C It's on Main Street 在主街上
    English trip -- Iris老师整理的一般时态
    English trip -- VC(情景课)5 B Places around town 城市设施
    English trip -- VC(情景课)5 Around Town
    Ploya定理学习笔记
    莫比乌斯反演学习笔记
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/1027109.html
Copyright © 2020-2023  润新知