jQuery实现table隔行换色和鼠标经过变色的两种方法

参考代码：

一、隔行换色 

$("tr:odd").css("background-color","#eeeeee"); 
$("tr:even").css("background-color","#ffffff"); 

或者一行搞定： 

$("table tr:nth-child(odd)").css("background-color","#eeeeee"); 

:nth-child 匹配其父元素下的第N个子或奇偶元素 

 

二、鼠标经过变色 

$("tr").live({ 
mouseover:function(){ 
$(this).css("background-color","#eeeeee"); 
}, 
mouseout:function(){ 
$(this).css("background-color","#ffffff"); 
} 
}) 

或者 

$("tr").bind("mouseover",function(){ 
$(this).css("background-color","#eeeeee"); 
}) 
$("tr").bind("mouseout",function(){ 
$(this).css("background-color","#ffffff"); 
}) 

 

其他参考资料：

 

<script type="text/javascript">
        $(document).ready(function () {
            $("#right tr td").mousedown(function () {//鼠标按住时remove mouseenter时 td的样式。
                $(this).removeClass("over"); $(this).addClass("click");
            })
            $("#right tr td").mouseup(function () {//鼠标弹起时，清除td的样式
                $(this).removeClass("click");
            })
            $("#right tr").mouseenter(function () {//鼠标进入tr添加样式.over
                $(this).addClass("over");
            })
            $("#right tr").mouseout(function () {  //鼠标离开tr，清除样式.over
                $(this).removeClass("over");
            })
            $("#right tr").click(function () {  //click tr时，添加样式.click
                $(this).addClass("click"); $(this).siblings().removeClass("click");
            })
        });
    </script>

 

 

项目中使用方式：

样式：

<style type="text/css">

.even_tr{ background-color: #FFFFFF;}

.odd_tr{ background-color: #d5effc;} 

</style>

1、鼠标经过tr行变色。

$(function(){

   //treeTable1为table的id

      $("#treeTable1 tr").mouseover(function (){$(this).addClass("odd_tr");});

     $("#treeTable1 tr").mouseout(function (){$(this).removeClass("odd_tr");});

});

 2、鼠标经过tr行变色。

<s:iterator value="#request.pager.list" status="stuts">

<s:if test="#stuts.index % 2 == 0 ">  

      <tr class="even_tr">          

  </s:if>  

<s:elseif test="#stuts.index % 2 != 0 ">  

        <tr class="odd_tr">

 </s:elseif>

 <td width="50px" >id</td>

         <td  >name</td>

         <td  >age</td>

         </tr>

</s:iterator>