jQuery之table(隔行变色)

页面代码如下：

 <table style="width:500px;height:100%;align:center;border: 1px black solid;background: white;" bgcolor=#7E92A8 border=0 cellpadding=1 cellspacing=1 rules="all">       	 	
       	 	 <tbody align="center" id="tbody">
       	 	 	<tr id="tr_1">
       	 	 		<td><input type="checkbox" name="checkUser"  value="1"/></td>
       	 	 		<td>张三</td>
       	 	 		<td>25</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_2">
       	 	 		<td><input type="checkbox" name="checkUser" value="2"/></td>
       	 	 		<td>李四</td>
       	 	 		<td>20</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_3"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="3"/></td>
       	 	 		<td>王五</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>     
       	 	 	<tr id="tr_4"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="4"/></td>
       	 	 		<td>李逵</td>
       	 	 		<td>36</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_5"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="5"/></td>
       	 	 		<td>王熙凤</td>
       	 	 		<td>31</td>
       	 	 		<td>女</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_6"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="6"/></td>
       	 	 		<td>刘少国</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_7"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="7"/></td>
       	 	 		<td>李四光</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_8"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="8"/></td>
       	 	 		<td>何故</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_9"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="9"/></td>
       	 	 		<td>王冠</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>    
       	 	 	<tr id="tr_10"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="10"/></td>
       	 	 		<td>王平</td>
       	 	 		<td>18</td>
       	 	 		<td>男</td>
       	 	 	</tr>    	 	 	
       	 	 </tbody>       	 	 
       	 </table> 

jQuery代码如下:

$(function(){
    //$("#tbody>tr:even").css("background-color",'#F3F3F3');
			    //$("#tbody>tr:odd").css("background-color",'#DEE9F7'); 	
			    
			    $("#tbody>tr").each(function(index){
			    	
			    	this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    	
			    	/*
			    	$(this).mouseover(function() {
					  this.style.backgroundColor = "#EEF8FF";
					});
					$(this).mouseout(function() {
					  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
					});*/
					
					$(this).bind({
						mouseover:function(){
							this.style.backgroundColor = "#EEF8FF";
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},mouseout:function(){
						    this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},click:function(){
							//判断tr的第一个td内的input checkbox是什么状态							
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
								this.style.backgroundColor = "#cfeace";
							}else{
								this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							}							
						}						
					});
			    	
			    });		    
});	

请关注我的下一篇：jQuery之实战(checkbox,table)