jquery奇偶行

来源:互联网 发布:淘宝去哪里找货源 编辑:程序博客网 时间:2024/06/13 18:25
<html> 
<head> 
<title>jquery奇偶行css效果</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
/*table中偶数行*/ 
.tabEven 

background: #9d8e8b; 

/*table中奇数行*/ 
.tabOdd 

background: #ffffff; 

</style> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#datalist tr:even").addClass("tabEven"); 
$("#datalist tr:odd").addClass("tabOdd"); 
}); 
</script> 
</head> 
<body> 
<table id="datalist"> 
<tr><td>第1行</td></tr> 
<tr><td>第2行</td></tr> 
<tr><td>第3行</td></tr> 
<tr><td>第4行</td></tr> 
<tr><td>第5行</td></tr> 
</table> 
</body> 
</html> 
0 0
原创粉丝点击