81.jQuery - TableEvenOdd (13.Sample )
테이블 홀수 짝수 행에 배경색을 변경하는 예제입니다.
| 01.TableEvenOdd.htm |
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>짝수행과 홀수행의 배경색 변경</title> <style type="text/css"> .odd{ background-color:Silver;} .even{ background-color:LightBlue;} </style> <script src="../../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('table.tbl tbody tr:odd').addClass('odd'); $('table.tbltbody tr:even').addClass('even'); }); </script> </head> <body> <table class="tbl" border="1"> <thead> <tr> <th>사진</th> <th>제목</th> <th>직업</th> <th>이름</th> <th>비고</th> </tr> </thead> <tbody> <tr> <td align="center"> <img src="../../images/zj6.jpg" style="height: 150px;width: 100px"/></td> <td>완전좋앙</td> <td>텔런트</td> <td>조선옥</td> <td>너무 좋앙</td> </tr> <tr> <td align="center"> <img src="../../images/zj4.jpg" style="height: 186px;width: 100"/></td> <td>완전좋앙</td> <td>텔런트</td> <td>조선옥</td> <td>완전이뻐!</td> </tr> <tr> <td align="center"> <img src="../../images/zj3.jpg" style="height: 174px;width: 100" /></td> <td>완전좋앙</td> <td>텔런트</td> <td>조선옥</td> <td>내 이상형!!</td> </tr> </tbody> </table> </body> </html> |
| 결과화면 |
완전 좋아함!!! 
[그림81-1] 홀수와 짝수 행 배경색이 바뀌게 됩니다. |
01.TableEvenOdd.htm