jQuery implements two methods of table interlaced color change and mouse color change

Reference Code:

1. Interlace color change 

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

Or do it in one line: 

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

:nth-child matches the Nth child or parity element under its parent element 

 

2. The mouse is discolored 

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

or 

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

 

Other references:

 

<script type="text/javascript">
        $(document).ready(function () {
            $("#right tr td").mousedown(function () {//The style of td when remove mouseenter when the mouse is held down.
                $(this).removeClass("over"); $(this).addClass("click");
            })
            $("#right tr td").mouseup(function () {//Clear the style of td when the mouse is up
                $(this).removeClass("click");
            })
            $("#right tr").mouseenter(function () {//Mouse enter tr to add style.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>