1. 程式人生 > >滑鼠劃過表格行變色效果JS

滑鼠劃過表格行變色效果JS

<!--滑鼠滑過表格行變色效果開始-->
<script type="text/javascript">
        /* 當滑鼠移到表格上是,當前一行背景變色 */
      $(document).ready(function(){
            $(".g-sun-li tr td").mouseover(function(){
                $(this).parent().find("td").css("background-color","#fff2cc");
            });
      })
      /* 當滑鼠在表格上移動時,離開的那一行背景恢復 */
      $(document).ready(function(){ 
            $(".g-sun-li tr td").mouseout(function(){
                var bgc = $(this).parent().attr("bg");
                $(this).parent().find("td").css("background-color",bgc);
            });
      })
      
      $(document).ready(function(){ 
            var color="#f7f7f7"
            $(".g-sun-li tr:odd td").css("background-color",color);  //改變偶數行背景色
            /* 把背景色儲存到屬性中 */
            $(".g-sun-li tr:odd").attr("bg",color);
            $(".g-sun-li tr:even").attr("bg","#fff");
      })
      </script>