您的位置:首页 - web前端
jquery+CSS实现隔行换色
先看效果:
这个是第1行的文字    
这个是第2行的文字    
这个是第3行的文字    
这个是第4行的文字    
这个是第5行的文字    
这个是第6行的文字    
这个是第7行的文字    
这个是第8行的文字    
这个是第9行的文字    
这个是第10行的文字    


以下是源代码:

<style>
.listtd{background-color:#999900}
</style>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="list">
<tr>
<td height="20">这个是第1行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第2行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第3行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第4行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第5行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第6行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第7行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第8行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第9行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">这个是第10行的文字</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){

$("#list tr:odd").addClass('listtd');

});
</script>
本站导航
相关文章
柯乐义 Copyright© keleyi.com