jquery实现奇偶行赋值不同css值

156 阅读 0 评论 103 点赞

我是靠谱客的博主无语方盒，最近开发中收集的这篇文章主要介绍jquery实现奇偶行赋值不同css值，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果如下：

使用jquery我们可以轻松的实现上面效果，代码如下：

复制代码代码如下:

 
<html> 
<head> 
<title>jquery奇偶行css效果</title> 
<script src="http://img.uoften.com/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> 