正文

推荐CSS+jquery(JQ)table表格隔行变色_隔行换色特效

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0104

DIV CSS表格table隔行变色_隔行换色jquery CSS特效，通过使用div+css+jQ实现table表格隔行变色，默认情况下table tr td表格每行背景是间隔颜色，鼠标经过对应table行时候背景有变色换色。

 

1、CSS table隔行变色原理：   

此变色换色原理是，通过JQ识别table tr td的双数单数，对应单数双数给予赋予不同CSS样式，通过不同背景，即可实现隔行换色变色效果，当鼠标经过时候JQ调用另外设置的tr td背景，实现鼠标经过背景颜色也跟着变化

2、特效代码：  

隔行变色CSS代码：



    
	
  1. 
		body{ margin:0 auto; text-align:center} 
    2. 
	
  2. 
		table{margin:0 auto; width:410px} 
    3. 
	
  3. 
		table{ border:1px solid #000} 
    4. 
	
  4. 
		table tr th{ height:28px; line-height:28px; background:#999} 
    5. 
	
  5. 
		table.stripe tr td{ height:28px; line-height:28px; text-align:center;background:#FFF;vertical-align:middle;} 
    6. 
	
  6. 
		/* css注释：默认css背景被白色 */ 
    7. 
	
  7. 
		table.stripe tr.alt td { background:#F2F2F2;} 
    8. 
	
  8. 
		/* css 注释：默认隔行背景颜色 */ 
    9. 
	
  9. 
		table.stripe tr.over td {background:#EEECEB;} 
    10. 
	
  10. 
		/* css注释：鼠标经过时候背景颜色 */ 
    11. 




	隔行变色JQ新建代码：




    
	
  1. 
		$(document).ready(function(){ //这个就是传说的ready    
    2. 
	
  2. 
		    $(".stripe tr").mouseover(function(){    
    3. 
	
  3. 
		       //如果鼠标移到class为stripe的表格的tr上时，执行函数    
    4. 
	
  4. 
		      $(this).addClass("over");}).mouseout(function(){    
    5. 
	
  5. 
		            //给这行添加class值为over，并且当鼠标一出该行时执行函数    
    6. 
	
  6. 
		            $(this).removeClass("over");}) //移除该行的class    
    7. 
	
  7. 
		  $(".stripe tr:even").addClass("alt");    
    8. 
	
  8. 
		    //给class为stripe的表格的偶数行添加class值为alt 
    9. 
	
  9. 
		    //www.divcss5.com 整理特效 
    10. 
	
  10. 
		  });   
    11. 




	隔行换色HTML代码：




    
	
  1. 
		<table width="400" border="0" class="stripe" cellpadding="0" cellspacing="1"> 
    2. 
	
  2. 
		  <tr> 
    3. 
	
  3. 
		    <th width="92">编号</th> 
    4. 
	
  4. 
		    <th width="339">网站名称</th> 
    5. 
	
  5. 
		    <th width="465">网址</th> 
    6. 
	
  6. 
		  </tr> 
    7. 
	
  7. 
		   
    8. 
	
  8. 
		  <tr> 
    9. 
	
  9. 
		    <td width="92">1</td> 
    10. 
	
  10. 
		    <td width="339"><a href="http://www.divcss5.com/">CSS教程网</a></td> 
    11. 
	
  11. 
		    <td width="465"><a href="http://www.divcss5.com/">www.divcss5.com</a></td> 
    12. 
	
  12. 
		  </tr> 
    13. 
	
  13. 
		  <tr> 
    14. 
	
  14. 
		    <td width="92">2</td> 
    15. 
	
  15. 
		    <td width="339"><a href="http://www.divcss5.com/">DIVCSS5</a></td> 
    16. 
	
  16. 
		    <td width="465"><a href="http://www.divcss5.com/">www.divcss5.com</a></td> 
    17. 
	
  17. 
		  </tr> 
    18. 
	
  18. 
		  <tr> 
    19. 
	
  19. 
		    <td width="92">3</td> 
    20. 
	
  20. 
		    <td width="339"><a href="http://www.css5.com.cn/">CSS5</a></td> 
    21. 
	
  21. 
		    <td width="465"><a href="http://www.css5.com.cn/">www.css5.com.cn</a></td> 
    22. 
	
  22. 
		  </tr>   
    23. 
	
  23. 
		</table> 
    24. 




	3、特效演示截图：   



	间隔色表格



	表格table隔行变色效果图



	4、在线演示：   



	http://www.divcss5.com/yanshi/2013032401/



	5、在线下载：   



	

		立即下载 （62.632KB）