zoukankan      html  css  js  c++  java
  • 一种实用的表格行鼠标点击高亮效果

    偶尔在看天天基金网净值公告时,从源代码里剥下的一段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
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    【Java】LinkedHashMap
    【Java】 HashMap
    【译】Solr in Action 第三章
    【译】Solr in Action 第二章
    【译 】Solr in Action 第一章
    【Three.js】OrbitControl 旋转
    【翻译】JNA调用DLL
    .Net使用Redis详解之ServiceStack.Redis
    C#操作redis
    ECharts图介绍
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/1027109.html
Copyright © 2011-2022 走看看