DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> jquery+CSS實現隔行換色
jquery+CSS實現隔行換色
編輯:WEB前端代碼     
先看效果:
這個是第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/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){

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

});
</script>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved