jquery实现鼠标悬停单元格变色

来源:互联网 发布:mac右键怎么按 编辑:程序博客网 时间:2024/05/22 00:34
<style>
.hover{ background-color: #ccc;cursor:pointer;}
.selected{background-color:gray;color:#666;cursorf:auto;}

</style>
  </head>
  
  <body>
    <button id="getData">获取数据</button>
    <table>
    <tbody>
    <tr><td>年龄</td><td>年龄</td><td>年龄</td><td>年龄</td><td>年龄</td></tr>
    <tr><td>年龄</td><td>年龄</td><td>年龄</td><td>年龄</td><td>年龄</td></tr>
    <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>
  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
  <script type="text/javascript">
  $(function(){
  $('table tbody tr').bind('mouseover',function(){
  $(this).addClass('hover');
  });
  $('table tbody tr').bind('mouseout',function(){
  $(this).removeClass('hover');
  });
  $('table tbody tr').bind('click',function(){
  $(this).removeClass('hover');
  $(this).addClass('selected');
  $(this).unbind('mouseover');
  $(this).removeClass('mouseout');
  });
  });

 
 
  </script>
0 0