JS鼠标移到表格行时变色 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>js测试</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" >
    window.onload = function(){
    
        
    //鼠标移到表格的行背景色改变，
    var  rows = $('tableData').rows;
    
    for(var i in rows){
        
        rows[i].onmouseover = function(){
            
            this.style.backgroundColor = '#d3e5fa';
        };
        rows[i].onmouseout = function(){
            this.style.backgroundColor = '';
        };
    }
    
    }

    function $(id){
        return document.getElementById(id);
    
    }

    </script>
  </head>
  
  <body>
  
    <table width="50%" border = '2'>
        <thead>
                <tr>
                    <td>用户名</td>
                    <td>性别</td>
                    <td>城市</td>
                    <td>兴趣</td>
                    <td>操作</td>
                
                </tr>
        </thead>
        <tbody id ="tableData" >
                <tr>
                    <td>小红</td>
                    <td>女</td>
                    <td>厦门</td>
                    <td>羽毛球</td>
            
                    <td>增加</td>
                </tr>
                <tr>
                    <td>小红</td>
                    <td>女</td>
                    <td>厦门</td>
                    <td>羽毛球</td>
            
                    <td>增加</td>
                </tr>
        </tbody>
    </table>
  </body>
</html>

 

posted @ 2013-10-13 09:57  EyesFront  阅读(922)  评论(0)  编辑  收藏  举报